Is there a way to indent Sass' 3.3 mappings?
In scss we can write following:
$colors: (
header: #b06,
text: #334,
footer: #666777
)
But in Sass I cannot add any break into parentheses. I think that parentheses is required into mappings syntax.
$colors:
header: #b06
text: #334
footer: #666777
Syntax error: Illegal nesting: Nothing may be nested beneath variable declarations.
I tried some variances and nothing was compiled without errors.
To compile Sass I need to write it into one string like this:
$colors: (header: #b06, text: #334, footer: #666777)
But it is not indented syntax.
I think that will be a good walkthrough to write indented-only things into SCSS file and then import them.
There is number of issues with the indented syntax in SASS.
Unfortunately SASS syntax doesn't support Multi-line. Reading the documentation, there is only one exception, when it comes to multiple CSS selectors like in this example:
.users #userTab,
.posts #postTab
width: 100px
height: 30px
Read the complete documentation here:
http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html#multiline_selectors
So, there is no possibility to get multi-line support for an argument list in SASS.
This is a known issue and will not be addressed any time soon.
This is definitely something I'd like to add, but it would take a considerable amount of effort due to the refactoring of the indented syntax that would be required. Right now that's just lower priority than adding features that benefit everyone.
https://github.com/sass/sass/issues/1088
Related
I very frequently use the CSS line numbers in Inspect Element to find where a rule is in a particular CSS file. When Sass outputs a CSS file, it imposes its own style rules on it which really don't line up 1:1 with how my SCSS is formatted. This makes it hard to find CSS rules in my code because none of the line numbers match. It's completely disturbing my workflow and is a major barrier to my further adoption of Sass.
I've already looked at sass --style=expanded and sass --style=compressed but neither of them come anywhere close to matching the whitespace style I want.
What I really need is a way to make Dart leave all my whitespace and line breaks exactly as they are, and minify mixins down to a single line each. Something you might call --style=preserve-line-numbers Is it possible?
No. That is not possible by SASS itself.
If you like you may have a look to the avaiable styles:
https://sass-lang.com/documentation/js-api#outputstyle
But to be honest: if you use SASS in the intended way with nested styles, mixins, using modules ... the compiled CSS will considerably differ from the SASS code anyway. That even applys to the line numbers. So your problem is a common challenge in the coding process.
As fast debugging is important SASS offers mapping technique:
If activated you are able to see the source code in the browser on the fly. That's really easy and should meet your demands. Maybe you like to have a look on it. Here is a good overview to it: https://thesassway.com/using-source-maps-with-sass-3-3/
Or however if not that way there is another little trick/workarround which may help:
Most SASS projects organize/structures code in partial files (which doesn't make it possible to keep line numbers). That's for different reasons and speeds up working as well. If you do so you just start every file with a CSS comment which notes the file name only. As comments are shown in the browser tools you are able to find the relevant SASS source file without mapping ... and as partial files are almost not as long finding the relevant code (which differs from the CSS) should not longer be the problem.
// ### examples partial filename in a CSS comment
/* base-typography */
...
/* base-forms */
...
/* section-hero */
...
That is not as fast as mapping technique I would really recommend. But finding the code that way is faster than try to keep line numbers exactly the same and missing that way a lot of other advantages of SASS which speeds up my work (like nestings, setting SASS only comments, using mixins and modules ...).
I find SASS syntax much easier and cleaner than SCSS, but the documentation is not as widespread and complete so I often stumble in time wasting syntax errors. Many articles mentioning SASS actually only contain information about SCSS. Even the official SASS documentation (https://sass-lang.com/documentation/file.SASS_REFERENCE.html#if) contains examples that apparently only refer to SCSS. For example, what's the SASS syntax for conditional statements in mixins? For example:
=button-colors($primary, $secondary, $border: true)
background-color: $primary
color: $secondary
if $border
border-color: $secondary
else
border-color: $primary
This example does not compile correctly: the if statement is ignored and there's no border-color in the resulting CSS.
Does anybody know about useful websites with documentation and examples of SASS syntax or tools to convert from CSS/SCSS to SASS online?
As you saw, The reference document is written in scss syntax maybe because of its more popularity and I'm going to highly recommend you choose scss syntax because of its most benefits that maybe is not clear at first view!
But anyway if you prefer to use sass one, I think you have to follow main document and check this link to watch the differences and then correct your syntax.
You can also use these tools to convert stylesheets:
css2sass: css to scss/sass.
sassmeister: scss/sass to css.
Just decided to learn SASS, pretty easy stuff except a very basic file won't compile.
It's literally this basic:
$test: #ffffff;
Command:
sass test.sass
Error Message:
error: expected "
".
$test:#ffffff;
^
test.sass 1:14 root stylesheet
I've no idea what it means by expected " - expected where??
please change extension test.sass to test.scss. and you good to go. 100% :)
As per sass-lang.com.
There are two syntaxes available for Sass. The first, known as SCSS
(Sassy CSS) and used throughout this reference, is an extension of the
syntax of CSS. This means that every valid CSS stylesheet is a valid
SCSS file with the same meaning. In addition, SCSS understands most
CSS hacks and vendor-specific syntax, such as IE's old filter syntax.
This syntax is enhanced with the Sass features described below. Files
using this syntax have the .scss extension.
The second and older syntax, known as the indented syntax (or
sometimes just "Sass"), provides a more concise way of writing CSS. It
uses indentation rather than brackets to indicate nesting of
selectors, and newlines rather than semicolons to separate properties.
Some people find this to be easier to read and quicker to write than
SCSS. The indented syntax has all the same features, although some of
them have slightly different syntax; this is described in the indented
syntax reference. Files using this syntax have the .sass extension.
I just noticed a css rule that looked like this
width: ~"-moz-calc(100% - 10px)";
Now I know -moz-calc, but why is this a string and what is the meaning of the '~'?
That's actually LESS, a CSS preprocessor.
The ~"" syntax creates a literal value which doesn't process its contents as LESS.
Otherwise, it would try to compile -moz-calc() as a LESS function.
I've just started using SASS. Very impressed, however there is something I'd like to do but can't seem to find answer as whether or not it's possible.
I have a block of CSS that I don't want SASS to parse/compile but I would still like that block outputting to the final compiled CSS file. Is this possible?
Thanks.
My first ever SO question, normally provides the answer. Hope I've not missed it somewhere, tried every search term I could think of to find it.
Put it in a separate .css file and import it in your SASS file. File ending in .css are not parsed but are still included in the final output.
This question is a bit old, but, in the spirit of keeping things up-to-date:
The current version of SASS (3.4.22) does a pretty good job of only changing what it needs to. If what you've written is valid CSS, it should output as is.
The only times you should see SASS modifying your styles is if you've done something that looks like it's supposed to be modified. Based on their documentation, that would be things like:
Nesting styles
Concatenating strings
content: 'foo' + 'bar';
Using interpolation
left: calc(50% - #{$variable})
Using variables
width: $variable
Using #extend or nesting an #include
In most other situations, in my experience, SASS will happily spit out whatever you've written.
If you do need to output something that SASS insists on parsing when it doesn't need to, you can wrap the offending piece in quotes and remove them using the unquote function:
$family: unquote("Droid+Sans");
#import url("http://fonts.googleapis.com/css?family=#{$family}");
which compiles to
#import url("http://fonts.googleapis.com/css?family=Droid+Sans");
Try to enclose your block in /* ..... */ in your scss file. Hope it helps.