percentage($value)
- Converts a unitless number to a percentage.
Sass jest akronimem dla "Syntactically Awesome Style Sheets". Jest to język, który możesz użyć do budowy swoich plików CSS.
Pozostając kompatybilny z CSS3, Przynosi wiele funkcji, które ułatwiają tworzenie spójnych reguł CSS, z mniejszą ilością potrzebnej pracy,przede wszystkim mniej kopiowania - wklejania, zagnieżdżanie jednej rzecz w drugą, zmiennych, klas, dyrektyw kontrolnych, (jeśli, dla, dla każdego, podczas), etc.
Żeby to osiągnąć, Sass wymaga użycia preprocesorów:Zmienia twoje pliki Sass na pliki CSS, tak że wszystkie przeglądarki potrafią je czytać.
Sass ma dwie składnie które można użyć:
.scss
..sass
.Mozesz zobaczyć różnice pomiędzy dwoma składniami tutaj:
h1 {color: #000; background: #fff} |
h1 color: #000 background: #fff |
Sass (i Compass na pierwszym miejscu, zobacz poniżej) wymaga instalacji języka Ruby na twoim urządzeniu.
Oto niektózy instalatorzy:
brew install ruby
".sudo apt-get install ruby1.9.1
".Jeśli Ruby jest zainstalowany na twoim urządzeniu, zainstaluj Comapass – co z kolei instaluje Sass. Przejdź do wiersza polecenia Ruby i wpisz "gem install compass
".
Jesteś teraz gotowy do stworzenia swojego pierwszego projektu:
/themes
na swoim lokalnym folderze instalacji PrestaShop.compass create
".config.rb
który jest niezbędny do konfiguracji pliku i skompilacji dla twojego projektu.Aby mieć pewność, że plik .scss
będzie automatycznie skompilowany, możesz wpisać komendę w Ruby: "compass watch
".
Jeśli nie chcesz spędzić swojego czasu nad wierszem poleceń, Scout to aplikacja wielkoplatformowa dla Ciebie:To jest samowystarczalne środowisko Ruby, który daje łatwy dostęp do Compass i Sass.
Pobierz to tutaj: http://mhs.github.io/scout-app/
Po zainstalowaniu go należy:
.scss
(folder wejściowy).Istnieją dwa sposoby,aby dodać komentarz do pliku Sass.
Pierwszy z nich pozwala na dodawanie komentarzy bez konieczności ich zastosowania w końcowym pliku CSS.
// This comment is not used in the CSS file. a { color: green; } |
Drugi używa zwykłej składni CSS i umożliwia dodawanie komentarzy, które zostaną wykorzystane w ostatecznym pliku CSS:
/* This comment is used in the CSS file. */ a { color: green; } |
Powala Tobie na blokach gniazda, określenie zasad, które mają zastosowanie tylko w obrębie tego selektora:
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } |
Rezultat:
nav ul {margin: 0; padding: 0; list-style: none;} nav li {display: inline-block;} nav a {display: block; padding: 6px 12px; text-decoration: none;} |
Sass pozwala odwoływać się do selektora nadrzędnego w zagnieżdźonym bloku korzystając z &:
a { font-weight: bold ; &:hover{ color: red ; } li & { font-weight: normal; } } |
Rezultat:
a {font-weight: bold ;} a:hover {color: red ;} li a {font-weight: normal;} |
CSS może użyć przestrzeni nazw podobnie jak czcionka family, rozmiar czcionki etc.
Można użyć do wskazania właściwości zagnieżdżania w ramach danej "nazwy":
p { font: { family: arial; size: 1.1em; weight: bold; } } |
Rezultat:
p { font-family: arial; font-size: 1.1em; font-weight: bold; } |
Sass pozwala na 4 róźne rodzaje generowania CSS.
Format zagnieźdźenia:
#main { color: #fff; background-color: #000; } #main p { width: 10em; } |
Rozszerzony format:
#main { color: #fff; background-color: #000; } #main p { width: 10em; } |
Kompaktowy format:
#main { color: #fff; background-color: #000; } #main p { width: 10em; } |
Format sprężony:
#main{color:#fff;background-color:#000}#main p{width:10em} |
Sass może skorzystać z języka skryptowego o nazwie SassScript. To sprawia, że możliwe jest użycie zmiennych obliczeń i dodatkowe funkcje. Może być stosowany do dowolnej wartości nieruchomości.
Zmienne muszą być określane przez prefiks $
:
$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 change the value of a variable, or have it changed only if the variable does not exist yet or is empty by using !default
.
For instance:
$content: "Init Value"; $content: "Init if no value" !default; $new_content: null; $new_content: "Init new if no value" !default; #main { content: $content; new-content: $new_content; } |
Result:
#main {content: "Init Value"; new-content: "Init new if no value";} |
SassScript supports 6 types of variables:
1.2
, 13
, 10px
)"foo"
, 'bar'
, baz
)blue
, #04a3f9
, rgba(255, 0, 0, 0.5)
)true
, false
)null
)1.5em 1em 0 2em
, Helvetica, Arial, sans-serif
)(key1: value1, key2: value2)
)When using a string value, you can use #{}
to unquote quoted strings, making it easier to use in some cases, for instance as a mixin selector:
@mixin warn-message($selector) { body.warn #{$selector}:before { content: "This is a warning !"; } } @include warn-message(".header"); |
Result:
body.warn .header:before {content: "This is a warning !";} |
You can also use the quote()
and unquote()
functions:
$family: unquote("Droid+Sans"); @import url("http://fonts.googleapis.com/css?family=#{$family}"); |
Result:
@import url("http://fonts.googleapis.com/css?family=Droid+Sans"); |
Your SCSS files can directly use calculations and comparators:
+, -, *, /, % and the <, >, <=, => number comparators.
+
to concatenate two strings.
and
, or,
andnot
for boolean variables.
==
and !=
for all variable types.
Sass can use the / operator to separate two numerical values, but Sass can use it to divide numbers. For instance:
p { font: 10px/8px; // Plain CSS, no division $width: 1000px; width: $width/2; // Uses a variable, does division width: round(1.5)/2; // Uses a function, does division height: (500px/2); // Uses parentheses, does division margin-left: 5px + 8px/2px; // Uses +, does division } |
...is compiled into:
p { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px; } |
As usual, use parenthesis to handle priorities:
p { cursor: e + -resize; font-family: sans- + "serif"; margin: 3px + 4px auto; width: (1em + 2em) * 3; } |
Result:
p {cursor: e-resize; font-family: sans-serif; margin: 7px auto; width: 9em;} |
You can also use several numerical functions:
percentage($value)
- Converts a unitless number to a percentage.
round($value)
- Rounds a number to the nearest whole number.
ceil($value)
- Rounds a number up to the next whole number.
floor($value)
- Rounds a number down to the previous whole number.
abs($value)
- Returns the absolute value of a number.
min($numbers...)
- Finds the minimum of several numbers.
max($numbers...)
- Finds the maximum of several numbers.
Sass uses lists for values such as margin: 10px 15px 0 0
or font-face: Helvetica, Arial, sans-serif
.
Lists are a series of values, separated with space or commas.
A list can contain one or more lists. For instance, "1px, 2px, 5px 6px
" is made of three elements:
The third element is itself a list of elements.
You have access to several list functions:
length($list)
- Returns the length of a list.
nth($list, $n)
- Returns a specific item in a list.
join($list1, $list2, [$separator])
- Joins together two lists into one.
append($list1, $val, [$separator])
- Appends a single value onto the end of a list.
zip($lists...)
- Combines several lists into a single multidimensional list.
index($list, $value)
- Returns the position of a value within a list.
Sass supports all of CSS3's @ rules, and adds a few more features such as:
You can create files that contain the Sass instructions that you can include in other files.
These "imported" files must have an underscore ("_") at the beginning of their names so as to not be directly compiled into CSS.
For instance:
html, body, ul, ol { margin: 0; padding: 0; } |
Importing _partial.scss
into global.scss
:
@import 'partial'; body { font-size: 100% Helvetica, sans-serif; background-color: #efefef; } |
@import automatically searches files with a .scss or .sass extension.
You can import several files with a single call: @import "rounded-corners", "text-shadow".
You can import a file from a nested block:
/* global.scss */ #main { // imports _example.scss @import "example"; } |
Mixins make it possible to group CSS properties that you can reuse as many times as necessary. They can even include other mixins.
SCSS example:
/* File _mixin.scss */ @mixin class-inclusion { th { text-align: center; font-weight: bold; } th, td { padding: 2px; } } @mixin highlighted-background {background-color: #fc0;} @mixin header-text {font-size: 20px;} // mixin with other mixins @mixin compound { @include highlighted-background; @include header-text; } |
Mixins are then used with the @include directive:
/* File global.scss */ @import "mixin.scss"; .sassEx {@include class-inclusion;} .mycompound {@include compound;} |
Mixins can have paremeters:
/* File _mixin.scss */ // mixins with parameters and default value @mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; } } // mixin with unknown number of arguments @mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } // mixin with unknown number of arguments and other mixin @mixin bold-box-shadow($shadows...) { font-weight: bold; @include box-shadow($shadows...); } |
Used in:
/* File global.scss */ @import "mixin.scss"; // arguments with default values can be omitted .box { include sexy-border(blue); } // with explicit keyword name, arguments can be passed in any order .bigbox { include sexy-border($width: 3in, $color:blue); } // use mixin with unknown number of arguments .shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); } // use mixin with variable and unknown number of arguments $param: 0px 4px 5px #666, 2px 6px 10px #999; .shadows { @include box-shadow($param...); |
You can directly pass a style block to a mixin in order to place in the defined style, using @content.
SCSS example:
@mixin apply-to-ie6-only { * html { @content; } } @include apply-to-ie6-only { #logo { background-image: url(/logo.gif); } } |
CSS result:
* html #logo { background-image: url(/logo.gif); } |
Note that variables are evaluated within the block where they are defined:
SCSS example:
$color: white; @mixin colors($color: blue) { background-color: $color; @content; border-color: $color; } .colors { @include colors {color: $color;} } |
CSS result:
.colors { background-color: blue; color: white; border-color: blue; } |
Sass allows the nesting of definition blocks from a @media directive.
@media directives can be nested, and they can use SassScript.
For instance, in SCSS:
.sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } @media screen { .sidebar { @media (orientation: landscape) { width: 500px; } } } $media: screen; $feature: -webkit-min-device-pixel-ratio; $value: 1.5; @media #{$media} and ($feature: $value) { .my_sidebar { width: 500px; } } |
CSS compilation result:
.sidebar {width: 300px; } @media screen and (orientation: landscape) { .sidebar {width: 500px; } } @media screen and (orientation: landscape) { .sidebar {width: 500px; } } @media screen and (-webkit-min-device-pixel-ratio: 1.5) { .my_sidebar {width: 500px; } } |
Inheritance makes it possible to import styles from one CSS selector to another.
SCSS examples:
.message { border: 1px solid #ddd; padding: 20px; color: #222; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } |
CSS compilation result:
.message, .success, .error { border: 1px solid #ddd; padding: 20px; color: #222; } .success { border-color: green; } .error { border-color: red; } |
You can also chain inheritance:
SCSS example:
.error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } .criticalError { @extend .seriousError; position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; } |
CSS compilation result:
.error, .seriousError, .criticalError { border: 1px #f00; background-color: #fdd; } .seriousError, .criticalError { border-width: 3px; } .criticalError { position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; } |
To create a class that would only be available through inheritance, you can use % instead of @.
%-using classes are not present in the generated CSS file.
SCSS example:
#main a%bigblue { color: blue; font-weight: bold; font-size: 2em; } .notice { @extend %bigblue; } |
CSS compilation result:
#main a.notice { color: blue; font-weight: bold; font-size: 2em; } |
By default, you cannot use @extend with a non-existing selector: it gives a compilation error.
To use a selector that may not yet exist in certain conditions, you should use the !optional flag:
a.important { @extend .notice !optional; } |
Likewise, you cannot use @extend in all situations, for instance when using CSS directives such as @media.
You must declare your selectors ans use them within a single directive.
Example in SCSS:
@media print { .error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } } |
Non-valid example in SCSS:
.error { border: 1px #f00; background-color: #fdd; } @media print { .seriousError { // INVALID EXTEND: .error is used outside of the "@media print" directive @extend .error; border-width: 3px; } } |
Two directives can help you debug your Sass files:
SCSS Example:
@debug 10em + 12em; |
Displays:
Line 1 DEBUG: 22em |
Other SCSS example:
@mixin adjust-location($x, $y) { @if unitless($x) { @warn "Assuming #{$x} to be in pixels"; $x: 1px * $x; } @if unitless($y) { @warn "Assuming #{$y} to be in pixels"; $y: 1px * $y; } position: relative; left: $x; top: $y; } |
These instructions are mainly used in mixins of Sass libraries such as Compass.
SCSS example:
$type: monster; p { @if $type == monster { color: green; } @else { color: black; } } @for $i from 1 through 3 { .item-#{$i} {width: 2em * $i;} } @each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } $i: 6; @while $i > 0 { .item-#{$i} {width: 2em * $i;} $i: $i - 2; } |
CSS compilation result:
p {color: green;} .item-1 {width: 2em;} .item-2 {width: 4em;} .item-3 {width: 6em;} .puma-icon {background-image: url('/images/puma.png');} .sea-slug-icon {background-image: url('/images/sea-slug.png');} .egret-icon {background-image: url('/images/egret.png');} .salamander-icon {background-image: url('/images/salamander.png');} .item-6 {width: 12em;} .item-4 {width: 8em;} .item-2 {width: 4em;} |
You can create your own functions and use it within your files. Just make sure that its name does not conflict with the evolution of Sass and Compass.
SCSS example:
$grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar {width: grid-width(5);} |
CSS result:
#sidebar {width: 240px;} |