I've been playing with SCSS to try and clean up a new stylesheet I'm working on. I love it so far! Simple, yet powerful. One issue I'm finding though, is the closing } brackets. For example, I'm compiling it with:
sass --watch ./main.scss:../main.css
...and with the following SCSS:
#moreFilterOptionsBtn {
text-align: center;font-size: 1.6em;
a {
background: none;
padding: 0;
}
}
You get:
#moreFilterOptionsBtn {
text-align: center;
font-size: 1.6em; }
#moreFilterOptionsBtn a {
background: none;
padding: 0; }
How can I get it to format it better? ie
#moreFilterOptionsBtn {
text-align: center;
font-size: 1.6em;
}
#moreFilterOptionsBtn a {
background: none;
padding: 0;
}
i.e putting the closing } on a new line, instead of squished up on the end of the rule? For me, this is much more readble!
Thanks
Typical! I just found out about the --style value in CLI:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
Just add --style expanded to the end, and it will format correctly:
sass --watch ./main.scss:../main.css --style expanded
Related
I want to use one CSS style for two classes with mixin, but when I use mixin the final result will be 2 classes with the same CSS.
I have shared my code example below:
#mixin btnhover {
background-color: $bg-cl-blc;
color: $txt-cl-ff;
}
.btn-base {
font-size: 15px;
&:hover {
#include btnhover;
}
}
.btn-otln {
font-size: 15px;
&:hover {
#include btnhover;
}
}
**OUTPUT CSS**
.btn-base:hover {
background-color: #000;
color: #fff;
}
.btn-otln:hover {
background-color: #000;
color: #fff;
}
This is how Sass works - it allows for better organisation of the code, but this code is then compiled, retaining functionality and not caring about other aspects.
If you really care about how the output code is structured, I would suggest to create a separate style for the classes with the hover effect:
#mixin btnhover {
background-color: #000;
color: #fff;
}
.btn-base {
font-size: 15px;
}
.btn-otln {
font-size: 15px;
}
.btn-base:hover,
.btn-otln:hover {
#include btnhover;
}
But in this approach, the use of mixin (and Sass) is questionable (in this exact case).
Generally, when you use Sass (or any other compiled language), you don't really care about the output CSS.
This won't be your answer, but I want to show you another way to make a mixin
#mixin btnhover($back, $color) {
background: $back;
color: $color;
}
When you use it, you can plug in the values
#include mixin btnhover($bg-cl-blc, $txt-cl-ff)
That way you can use the mixin over and over in different places with different values
Just discovered this recently myself, it's a concept called 'placeholders' in SASS syntax (see example below). I've done my best to apply it to your situation below....
Put this in your .scss file:
$bg-cl-blc: #ff211a;
$txt-cl-ff: #fff;
$btn-base-size: 15px;
%btnhover {
background-color: $bg-cl-blc;
color: $txt-cl-ff;
}
%btn-common {
font-size: $btn-base-size;
}
.btn-base {
#extend %btn-common;
&:hover {
#extend %btnhover;
}
}
.btn-otln {
#extend %btn-common;
&:hover {
#extend %btnhover;
}
}
CSS output will look like this
.btn-otln:hover, .btn-base:hover {
background-color: #ff211a;
color: #fff;
}
.btn-otln, .btn-base {
font-size: 15px;
}
Great article written up on this here:
https://dev.to/kemotiadev/are-sass-mixins-really-that-lightweight-and-what-are-placeholders-119i
I'm migrating my project from create-react-app to Vite.
Among my styles there is a following fragment:
// Button.module.scss
.btn {
border-radius: 8px;
border-style: solid;
padding: 8px;
cursor: pointer;
--btn-bg-color: #efefef;
&:not(:disabled) {
cursor: pointer;
background-color: var(--btn-bg-color);
&:hover {
--btn-bg-color: gray;
border-color: white;
}
}
}
And in other module:
.label {
composes: btn from 'src/Button.module.scss'
}
This used to build fine with webpack.
With Vite, in css bundle I get this:
._btn_x66zc_1 {
border-radius: 8px;
border-style: solid;
padding: 8px;
cursor: pointer;
--btn-bg-color: #efefef;
&
:not(:disabled) {
cursor: pointer;
background-color: var(--btn-bg-color);
&
:hover {
--btn-bg-color: gray;
border-color: #fff
}
}
}
and, respectively, CLI warnings:
warnings when minifying css:
▲ [WARNING] CSS nesting syntax is not supported in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14") [invalid-#nest]
<stdin>:309:2:
309 │ &:not(:disabled) {
╵ ^
Apparently, a module linked with composes prop isn't get pre-processed.
I tried to add a postcss-nested plugin – in a hope nesting syntax can be handled both at pre- and post-processing stages:
// vite.config.ts
{
css: {
postcss: { plugins: [ postcssNested() ] }
}
}
but this did nothing.
The questions are:
Is it possible to make it work as it used to?
Is the error I'm getting now an expected behaviour? (and thus, did react-app use some specific tricks to make this non-conventional usage possible?)
how can we merge two styles blocks of different classes which are having same properties except "Padding" as shown in below code in to one block.
Here i am using SASS(Syntactically Awesome Style Sheets).Any help would be appreciable. Thank you.
.bookstyle {
color: $alt-dark-blue;
padding-left:82.1px;
cursor: pointer;
clear: both;
font-size: 10px;
}
.pagestyle {
color: $alt-dark-blue;
clear : both;
cursor: pointer;
font-size: 10px;
}
One way of doing this is to have one extend the other. Here's an example of it
.bookstyle {
#extend .pagestyle;
padding-left:82.1px;
}
.pagestyle {
color: red;
clear : both;
cursor: pointer;
font-size: 10px;
}
Alternatively you could use mixins to add the required rules.
I'm assuming you're using the SCSS syntax for Sass by the way
You can use #extend rule
%pagestyle {
color: $alt-dark-blue;
clear : both;
cursor: pointer;
font-size: 10px;
}
.bookstyle {
#extend %pagestyle;
padding-left:82.1px;
}
After converting a lot of redundant crappy css files into scss files, I have a bunch of scss files. I'm pretty sure there is a lot of common css repeated among these files and I would like to extract this code.
As an example, let's say I have this block of scss code (let's call it block A) :
.test {
color: white;
.toto {
background: red;
font-size: 12px;
}
}
And another block (that we'll call block B) :
.test {
color: black;
.toto {
background: blue;
font-size: 12px;
text-align: center;
}
}
I want to be able to extract the following common scss code from block A and B :
.test {
.toto {
font-size: 12px;
}
}
It seems like a simple task to do, but with a large list of long scss files, it's really painful to do it manually. After searching for a while I didn't find any tool for that.
An intermediary solution could be to convert sass code to a multi-dimensionnal associative array and to process arrays to find intersections, but I could not find any simple solution to do that either, so any help would be appreciated.
There are a few approaches but in this instance, I would opt for a variable:
$base-font-size: 12px;
.test {
color: white;
.toto {
background: red;
font-size: $base-font-size;
}
}
.test {
color: black;
.toto {
background: blue;
font-size: $base-font-size;
text-align: center;
}
}
Or you could add a toto mixin with some defaults and use that:
#mixin toto($background: red, $text-align: left, $font-size: 12px) {
.toto {
background: $background;
text-align: $text-align;
font-size: $font-size;
}
}
.test {
color: white;
#include toto();
}
.test {
color: black;
#include toto(blue, center);
}
EDIT: or use extend:
.font-size-12 {
font-size: 12px;
}
.test {
color: white;
.toto {
#extend .font-size-12;
background: red;
}
}
.test {
color: black;
.toto {
#extend .font-size-12;
background: blue;
text-align: center;
}
}
I have the following SCSS:
.btn {
color: #000;
#at-root {
a#{&} {
display: inline-block;
}
}
}
I'm expecting the following CSS:
.btn { color: #000; }
a.btn { display: inline-block; }
But when I compile it using gulp-sass, I get this instead:
.btn { color: #000; }
.btn a.btn { display: inline-block; }
This appears to be a bug with Libsass, which is what gulp-sass compiles with. If you want to get the correct results, you'll need to switch to using the Ruby compiler for Sass.