From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support.
What's the difference with SCSS? Is it supposed to be the same language? Similar? Different?
Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.
CSS variables are supported and can be utilized but not as well as pre-processor variables.
For the difference between SCSS and Sass, this text on the Sass documentation page should answer the question:
The SCSS syntax uses the file extension .scss. With a few small exceptions, it’s a superset of CSS, which means essentially all valid CSS is valid SCSS as well. Because of its similarity to CSS, it’s the easiest syntax to get used to and the most popular.
The indented syntax was Sass’s original syntax, and so it uses the file extension .sass. Because of this extension, it’s sometimes just called “Sass”. The indented syntax supports all the same features as SCSS, but it uses indentation instead of curly braces and semicolons to describe the format of the document.
However, all this works only with the Sass pre-compiler which in the end creates CSS. It is not an extension to the CSS standard itself.
I'm one of the developers who helped create Sass.
The difference is syntax. Underneath the textual exterior they are identical. This is why sass and scss files can import each other. Actually, Sass has four syntax parsers: scss, sass, CSS, and less. All of these convert a different syntax into an Abstract Syntax Tree which is further processed into CSS output or even onto one of the other formats via the sass-convert tool.
Use the syntax you like the best, both are fully supported and you can change between them later if you change your mind.
The Sass .sass file is visually different from .scss file, e.g.
Example.sass - sass is the older syntax
$color: red
=my-border($color)
border: 1px solid $color
body
background: $color
+my-border(green)
Example.scss - sassy css is the new syntax as of Sass 3
$color: red;
#mixin my-border($color) {
border: 1px solid $color;
}
body {
background: $color;
#include my-border(green);
}
Any valid CSS document can be converted to Sassy CSS (SCSS) simply by changing the extension from .css to .scss.
Sass (Syntactically Awesome StyleSheets) have two syntaxes:
a newer: SCSS (Sassy CSS)
and an older, original: indent syntax, which is the original Sass and is also called Sass.
So they are both part of Sass preprocessor with two different possible syntaxes.
The most important difference between SCSS and original Sass:
SCSS:
Syntax is similar to CSS (so much that every regular valid CSS3 is also valid SCSS, but the relationship in the other direction obviously does not happen)
Uses braces {}
Uses semi-colons ;
Assignment sign is :
To create a mixin it uses the #mixin directive
To use mixin it precedes it with the #include directive
Files have the .scss extension.
Original Sass:
Syntax is similar to Ruby
No braces
No strict indentation
No semi-colons
Assignment sign is = instead of :
To create a mixin it uses the = sign
To use mixin it precedes it with the + sign
Files have the .sass extension.
Some prefer Sass, the original syntax - while others prefer SCSS. Either way, but it is worth noting that Sass’s indented syntax has not been and will never be deprecated (web archive).
Conversions with sass-convert:
# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass
The Sass and SCSS documentation
Its syntax is different, and that's the main pro (or con, depending on your perspective).
I'll try not to repeat much of what others said, you can easily google that but instead, I'd like to say a couple of things from my experience using both, sometimes even in the same project.
SASS pro
cleaner - if you are coming from Python, Ruby (you can even write props with symbol-like syntax) or even the CoffeeScript world, it will come very natural to you - writing mixins, functions and generally any reusable stuff in .sass is much 'easier' and readable than in .scss (subjective).
SASS cons
whitespace sensitive (subjective), I don't mind it in other languages but here in CSS it just bothers me (issues: copying, tab vs space war, etc).
no inline rules (this was game breaking for me), you can't do body color: red like you can in .scss body {color: red}
importing other vendor stuff, copying vanilla CSS snippets - not impossible but very boring after some time. The solution is to either have .scss files (alongside with .sass files) in your project or to convert them to .sass.
Other than this - they do the same job.
Now, what I like to do is to write mixins and variables in .sass and code that will actually compile to CSS in .scss if possible (ie Visual studio doesn't have support for .sass but whenever I work on Rails projects I usually combine two of them, not in one file ofc).
Lately, I'm considering giving Stylus a chance (for a full-time CSS preprocessor) because it allows you to combine two syntaxes in one file (among some other features). That may not be a good direction for a team to take but when you are maintaining it alone - it's ok. The stylus is actually most flexible when syntax is in question.
And finaly mixin for .scss vs .sass syntax comparison:
// SCSS
#mixin cover {
$color: red;
#for $i from 1 through 5 {
&.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
}
}
.wrapper { #include cover }
// SASS
=cover
$color: red
#for $i from 1 through 5
&.bg-cover#{$i}
background-color: adjust-hue($color, 15deg * $i)
.wrapper
+cover
From the homepage of the language
Sass has two syntaxes. The new main
syntax (as of Sass 3) is known as
“SCSS” (for “Sassy CSS”), and is a
superset of CSS3’s syntax. This means
that every valid CSS3 stylesheet is
valid SCSS as well. SCSS files use the
extension .scss.
The second, older syntax is known as
the indented syntax (or just “Sass”).
Inspired by Haml’s terseness, it’s
intended for people who prefer
conciseness over similarity to CSS.
Instead of brackets and semicolons, it
uses the indentation of lines to
specify blocks. Although no longer the
primary syntax, the indented syntax
will continue to be supported. Files
in the indented syntax use the
extension .sass.
SASS is an interpreted language that spits out CSS. The structure of Sass looks like CSS (remotely), but it seems to me that the description is a bit misleading; it's not a replacement for CSS, or an extension. It's an interpreter which spits out CSS in the end, so Sass still has the limitations of normal CSS, but it masks them with simple code.
SASS stands for Syntactically Awesome StyleSheets. It is an extension
of CSS that adds power and elegance to the basic language. SASS is
newly named as SCSS with some chages, but the old one SASS is also
there. Before you use SCSS or SASS please see the below difference.
An example of some SCSS and SASS syntax:
SCSS
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
//Mixins
#mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box { #include transform(rotate(30deg)); }
SASS
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
//Mixins
=transform($property)
-webkit-transform: $property
-ms-transform: $property
transform: $property
.box
+transform(rotate(30deg))
Output CSS after Compilation(Same for Both)
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
//Mixins
.box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
For more guide you can see the official website.
The basic difference is the syntax. While SASS has a loose syntax with white space and no semicolons, the SCSS resembles more to CSS.
Sass was the first one, and the syntax is a bit different.
For example, including a mixin:
Sass: +mixinname()
Scss: #include mixinname()
Sass ignores curly brackets and semicolons and lay on nesting, which I found more useful.
Difference between SASS and SCSS article explains the difference in details. Don’t be confused by the SASS and SCSS options, although I also was initially, .scss is Sassy CSS and is the next generation of .sass.
If that didn’t make sense you can see the difference in code below.
/* SCSS */
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}
In the code above we use ; to separate the declarations. I’ve even added all the declarations for .border onto a single line to illustrate this point further.
In contrast, the SASS code below must be on different lines with indentation and there is no use of the ;.
/* SASS */
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
You can see from the CSS below that the SCSS style is a lot more similar to regular CSS than the older SASS approach.
/* CSS */
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
I think most of the time these days if someone mentions that they are working with Sass they are referring to authoring in .scss rather than the traditional .sass way.
Original sass is ruby syntax-like, similar to ruby, jade etc...
In those syntaxes, we don't use {}, instead we go with white spaces, also no usage of ;...
In scss syntaxes are more like CSS, but with getting more options like: nesting, declaring, etc, similar to less and other pre-processing CSS ...
They basically do the same thing, but I put couple of lines of each to see the syntax difference, look at the {}, ;, and spaces:
SASS:
$width: 100px
$color: green
div
width: $width
background-color: $color
SCSS:
$width: 100px;
$color: green;
div {
width: $width;
background-color: $color;
}
The compact answer:
SCSS refers to the main syntax supported by the Sass CSS pre-processor.
Files ending with .scss represent the standard syntax supported by Sass. SCSS is a superset of CSS.
Files ending with .sass represent the "older" syntax supported by Sass originating in the Ruby world.
TL;DR
Both is Sass but different is only the compile option.
S(assy) CSS = Sass
There is not only one syntax in which you can use SASS, but two: On the one hand you have the original form, which is gladly called "indented syntax" or simply "SASS". In addition, there is a newer variant, which is more closely oriented to the specifications of CSS and is therefore called Sassy CSS (SCSS) - i.e. CSS in the style of SASS. With version 3 of SASS, SCSS has been established as the official syntax. The biggest difference: the use of brackets and semicolons.
The original SASS syntax uses indentations and line breaks, an approach modeled on YAML. To terminate a line of code, it is enough to make a line break - i.e. press the Enter key. Indentations work quite simply via the tabulator. So by changing the position in the typeface, groupings are formed - so-called declaration blocks. This is not possible with CSS itself. Here, curly braces must be used for the groupings and semicolons for the property declarations. And this is exactly what is necessary with SCSS.
So it becomes a dispute between SASS vs SCSS
Some users swear by the ease of use of the original SASS, where you don't have to pay attention to the proper placement of parentheses when moving snippets of source code around, and generally produces leaner, more concise code. Overall, the "indented syntax" makes do with fewer characters and lines. The supporters of SCSS, on the other hand, are happy to accept the additional effort, because it is more similar to what is known from CSS anyway.
SCSS is a superset to CSS, and this ensures that CSS code basically also works in SCSS - but not the other way around. Nevertheless, the functions of SASS are still fully included. This makes it easier to work with both languages at the same time. In addition, for people who already work with CSS and have become accustomed to the syntax, the switch is much easier. Although SASS supports both syntaxes, you have to choose per project: To be able to distinguish the different formats, you give the files either the extension .sass or .scss.
SASS is Syntactically Awesome Style Sheets and is an extension of CSS which provides the features of nested rules, inheritance, Mixins whereas SCSS is Sassy Cascaded Style Sheets which is similar to that of CSS and fills the gaps and incompatibilities between CSS and SASS. It was licensed under the MIT license.
This article has more about the differences:https://www.educba.com/sass-vs-scss/
SCSS is SASS.
You can't say they are different.
But .scss and .sass files are different SASS syntaxes.
Sass has two syntaxes.
The SCSS syntax (.scss) is used most commonly. It's a superset of CSS, which means all valid CSS is also valid SCSS.
The indented syntax (.sass) is more unusual: it uses indentation rather than curly braces to nest statements, and newlines instead of semicolons to separate them. (Similar to python syntax)
SCSS is the new syntax for Sass. In Extension wise, .sass for the SASS while .scss for the SCSS. Here SCSS has more logical and complex approach for coding than SASS.
Therefore, for a newbie to software field the better choice is SCSS.
Found myself wondering the same thing, and stumbled upon a straight-forward explanation in Harvard's CS50:
A language called Sass ... (is) essentially an extension to CSS ... it adds additional features to CSS ... just to make it a little bit more powerful for us to use.
One of the key features of Sass is the ability to use variables
The Sass extension is .scss (as opposed to .css for a regular CSS file).
So, when we ask "what is the difference between scss and sass?" - the answer could simply be that .scss is simply the file extension used when wishing to use Sass instead of regular CSS.
Related
Im trying to understand the naming of the % sign in Sass, and im not sure what to call it when I use it.
I know that when using "$" its called a variable and can only really store one rule like for example:
$variable: #FFFFFF;
But sometimes I use "%" for extends in my Sass like this:
%style {
color: #FFFFFF;
padding: 20px;
}
what is my "%style" called? is it a Sass object? or module or? Can someone shine some light on this. I cant seem to find the information when Googling.
Selectors that contain % are referred to as "placeholder selectors".
From the Sass Documentation:
Sass has a special kind of selector known as a “placeholder”. It looks and acts a lot like a class selector, but it starts with a % and it's not included in the CSS output. In fact, any complex selector (the ones between the commas) that even contains a placeholder selector isn't included in the CSS, nor is any style rule whose selectors all contain placeholders
Is there/what is the best way to set a variable in my CSS stylesheet that is cross browser compatible?
I want to set
color: #123456;
into a variable since I am using it in numerous different spots and if I choose to change that colour I want it all the change.
CSS Variables are a thing but the only browser that has any support for it at this time is Mozilla.
Alternative options:
use Javascript and/or a server-side language to set the variables in your CSS file programatically.
use a CSS preprocessor like SASS. This allows you to create variables. You do have to re-deploy your CSS each time.
consider handling colors a different way in your markup.
Regarding the last one, instead of hardcoding a color into an elements style:
<div class="thisElement"></div>
.thisElement {
font-size: 13px
background: red;
color: #123456;
}
consider using classes for this instea:
<div class="thisElement color1"></div>
.thisElement {
font-size: 13px
background: red;
}
.color1 {
color: #123456;
}
That way you only need to declare the color once in your style sheet. This is essentially 'object oriented CSS'. The idea is that instead of applying monolithic style declarations for each DOM object, you instead declare 'snippets' of style to a bunch of separate classes, then assign those separate classes as you see fit to each DOM object.
In a sense, you've turned the class name, itself, into the variable. You declare it in your CSS once, then use it as many times as needed in your HTML.
If you want to do it in native css you can't. However, you can use technologies / preprocessors like SASS / LESS to achieve exactly what you are describing.
Cross-browser compatibility, variables and calculating.
Once you get used to the syntax (which is really easy to understand and modify) and you are ready to go, SASS creates the "plain" css files for you. Keeps your code clean, simple and easy to maintain.
Have a look at this:
http://sass-lang.com/
Also, here you can find some examples and snippets to have a first impression.
Its not well supported, but this is how it works according to
http://www.w3.org/TR/css-variables/
Custom properties define variables, referenced with the var() notation, which can be used for many purposes. For example, a page that consistently uses a small set of colors in its design can store the colors in custom properties and use them with variables:
:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}
You can to use a preprocessor like SASS, which has this done much better.
In Webstorm 10, you can insert all vendor prefix styles using built in emmet. For instance, you type in -border-radius followed by the TAB key, it will automatically create the vendor specific styles for you. Then you can type in eg. 10px and it will apply the style to all vendor prefixes.
My question is, if I want to update the style at a later stage, is there a way to update in 1 place and have it applied to the rest?
Hope that makes sense.
Thanks.
#Nico is right - CSS pre-processors like Less and SASS are awesome for this type of thing - they help you to not have to repeat yourself.
If you're sticking with CSS though, WebStorm has multi-line editing, so one way to do this is to hold down the Alt key and click just before each of the 10px values. You will spawn a new cursor at each point where you click and then you can overtype with your new value and it will change all of them.
I appreciate that's not quite as slick as when you create the multiple vendor-prefixed lines in the first place. You might just find it quicker to recreate the whole block.
Well directly in CSS there is no quick way. However (and not specific to webstorm as I haven never tried) you could use LESS http://lesscss.org/features/.
Basically LESS is a pre-processor for CSS that you define variables in the LESS file (for instance your -border-radius property) and then when the LESS file is processed the variables are replaced with the definition. For instance
#border-radius: 10px;
.my-class{
border-radius: #border-radius;
}
Will result as
.my-class{
border-radius: 10px;
}
There are many other great features however in your exact case you may even want to use a Parametric Mixin. These allow you to define custom styles with variables. There example is almost exactly what you are looking for such as (taken from the reference).
.border-radius(#radius) {
-webkit-border-radius: #radius;
-moz-border-radius: #radius;
border-radius: #radius;
}
And called as:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
Now you can use LESS many different ways and pre-process your files to css on the fly or process them as part of your deployment.
Here is a reference found for WebStorm
This question already has answers here:
False positive "undefined variable" error when compiling SCSS
(4 answers)
Closed 7 years ago.
My question is actually broader than the title says. This is just where I am running into a snag with my idea, but I am open to all sorts of solutions. Let me explain my overall goal.
I like what CSS preprocessors can do. I like the ideas of OOCSS and SMACSS. I am new to all of this. I am trying to upgrade my design methods to somehow incorporate the best of all worlds. I have a theoretical method that works like this:
use only semantic class names or id's or whatever
define modules or patterns in some common style sheet
have per page stylesheets that #extend modules from the common stylesheet onto the semantic selectors pertaining to a given page
So this:
/* modules.scss */
.ruddy {color: red}
.fullwidth {width: 100%; display: block;}
plus this:
/* homepage.scss */
#import modules.sass
#intro {#extend ruddy; #extend fullwidth}
aside {#extend ruddy;}
.thing {#extend fullwidth;}
becomes this:
/* homepage.css */
#intro, aside {color: red}
#intro, .thing {width: 100%; display: block;}
I haven't necessarily seen anybody else do this but it seemed like a good idea to me. The problem I am running into in my grand scheme is that #extend doesn't seem to work from an imported file. Someone somewhere else on SO said that it is not possible. Is this true? I got mixins to work but problem with them is that they duplicate every attribute in the output css, which doesn't seem ideal.
I'm actually more partial to LESS (syntax), but that doesn't even have extending at the moment. Should I not worry about the inefficiencies of mixins or is there some way to achieve what I'm asking for?
Note:
I am auto-compiling my sass with a tool called Prepros. When I try to compile code such as the above I get an error like.
WARNING on line 11 of ... \sass\home.scss: "#intro" failed to #extend "ruddy".
The selector "ruddy" was not found.
If I just copy the code from module.scss into homepage.scss then the problem goes away.
The problem is here:
#intro {#extend ruddy; #extend fullwidth}
aside {#extend ruddy;}
.thing {#extend fullwidth;}
ruddy and fullwidth aren't selectors. If you're extending the .ruddy class, you need to include the period, as that is part of the selector.
#intro {#extend .ruddy; #extend .fullwidth}
aside {#extend .ruddy;}
.thing {#extend .fullwidth;}
It is not true.
You can declare classes (including the %-prefixed ones) in one file, import the first file into the second file and extend the classes in the second file.
Example:
foo.sass
%foo
color: red
bar.sass
#import foo.sass
html
#extend %foo
Run sass bar.sass bar.css.
bar.css appears
html {
color: red; }
PS For real SASS experience, you should leverage Compass. Compass is a bunch of things under one name:
a handy tool to compile SASS efficiently;
a huge library of handy SASS styles for all occasions;
an ecosystem of extensions that you can install and use in your projects effortlessly. This is what makes SASS stand out. You don't have to reinvent the wheel over and over again.
UPD Finally error text!
You're missing the dot in the name of the class. aside {#extend ruddy;} should be aside {#extend .ruddy;}.
I remember reading about a Sass feature that allowed you to specify a list of elements and then a child and it would compile to a list of multiple selectors. I ahve searched around but can't find it.
I want it to compile down to this:
header .container,
footer .container
background: yellow
But i'm sure there is a feature of Sass that allows writing that in a much nicer way.
Any ideas?
That style could be refactored as this:
.container {
header &, footer & {
background: yellow;
}
}
But maybe you are thinking of a Compass feature? http://compass-style.org/reference/compass/helpers/selectors/#nest