I am a new sass user. when i am typing in style.scss and it converted to style.css, the stylesheet indentations is too poor. The style.css did not get the proper indentation.
I am using c9.io here is the screenshot of my style.scss and style.css
Thank You
Sass has a few output styles. It sounds like you're looking for the "expanded" style.
nested
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
expanded
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
compact
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
compressed
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
I'm not familiar with the c9 editor but if there's a settings page (maybe try the cog icon in the bottom right of the editor), you may be able to toggle it there.
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
literally, parent selector doesn't work when using scss. This looks like the correct syntax, but why doesn't it work? If anyone knows please help me.
div {
h1 {
background: $green;
color: white;
}
&.title {
font-size: 30px;
color: purple;
}
}
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
This is my first question and I tried to search first but couldn't find the answer.
I am using Web Essentials 4 in MS Visual Studio to compile LESS files to CSS.
It works fine, but recently I wanted to try using the &:extend functionality of LESS, but it won't compile correctly. It just ignores the &:extend part.
So I have a simple .less file, with this code:
#em-main {
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
}
And this is the output.
#em-main nav ul {
background: blue;
}
#em-main .inline {
color: red;
}
If I take out the #em-main, it compiles fine. Is this a limitation of LESS or is something wrong with my setup?
Thanks
I wonder if possible what you try to do. In fact you try to extend #em-main .inline which is not possible, see also: LESS: Extend a previously defined nested selector, https://github.com/less/less.js/issues/1597 and so on.
Possible use a mixin or a ruleset:
#set-color: {
color: red;
};
#em-main {
nav ul {
#set-color();
background: blue;
}
.inline {
#set-color();
}
}
** update **
the above compiles into:
#em-main nav ul {
color: red;
background: blue;
}
#em-main .inline {
color: red;
}
But now #harry wrotes:
I think using :extend(#em-main .inline) (full selector path) would
also work.
And he is right (of course);
#em-main {
nav ul {
&:extend(#em-main .inline);
background: blue;
}
.inline {
color: red;
}
}
compiles into
#em-main nav ul {
background: blue;
}
#em-main .inline,
#em-main nav ul {
color: red;
}
I'm using SublimeSaveOnBuild. When my scss files compiles to css, the resulting code displays the closing brace like this:
.content {
padding-left: 10px; }
I'd like it to generate the closing brace in the traditional format:
.content {
padding-left: 10px;
}
Does anyone know how to accomplish this automatically so it compiles each selector with the closing brace on its own line?
There's a Sass setting called style that controls the look of the output. The default is nested, which is what you're seeing: Just switch it to expanded and you'll get the more traditional look you want.
See the documentation to find the right way to change it for your setup.
Here's an example from the documentation that shows how it will look:
// nested
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
// expanded
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
If you're using Grunt, adding options like this might help (using grunt-contrib-sass):
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'style.css' : 'sass/style.scss'
}
}
}