SASS summary, sassless

SASS summary, sassless

SASS is the abbreviation of Syntactically Awesome Stylesheete. It is a css development tool that provides a lot of convenience and simple syntax to make css look more like a language, this feature is also called "css pre-compilation ". Its main design idea is to allow us to write our own styles Based on programming ideas, and then generate the css files we need through the "compiler. Sass is not a substitute for css. It only makes css more efficient and maintainable, and does not need to modify the compiled css file.

1. Install sass

Sass is a ruby-based product. Therefore, you must install ruby: https://www.ruby-lang.org/zh_cn/downloads/before installing sass /. Download the version of the corresponding system and click next. After the installation is complete, enterruby -vYou can view the ruby version.

$ ruby -vruby 2.0.0p451 (2014-02-24) [x64-mingw32]

After installing ruby, entergem install sassYou can install sass.sass -vTo view the sass version.

$ sass -vSass 3.3.5 (Maptastic Maple)

Ii. Compile sass file 2.1 sass File Format

Sass has two optional file suffixes.sassAnd.scssThe main difference between the two is the writing format.

.sassThe file is indented, and the format requirements are strict. There cannot be semicolons at the end.

.test    margin: 5px 10px    font-size: 14px    color: #333

.scssThe file write method and css are consistent.

.test {    margin: 5px 10px;    font-size: 14px;    color: #333;}

2.2 compile sass

The SASS file is suffixed with. scss. You can use the following command to compile the scss file as the final css file:

sass demo.scss

Or specify the css file name.

sass demo.scss product.css

You can also set the style of the output css file.

sass --style compressed test.scss test.css

The output style can be selected in four ways. The default value is nested.

• Nested: nested indent css code
• Expanded: expanded multi-line css code
• Compact: Concise css code
• Compressed: compressed css code

Watch a single file

sass --watch test.scss:test.css

Watch folder

sass --watch src:dest

Iii. sass Syntax 1. Variables

SASS supports variable definition. You can use $ to define a variable. In this way, we can define some common styles as a variable and directly reference it during use:

$white:#fff;$font12:12px;.menu{    color: $white;    font-size: $font12;}

After compilation:

.menu {  color: white;  font-size: 12px;}

If a variable is referenced in a string, you need to write the variable name in#{}. For example:

$img-dir: "public/images/";.test {    background-image: url(#{$img-dir}icon.png);}

You can set the default variable to provide the SASS default value. It means that if the variable is declared with a value, use the value it declares. Otherwise, use the default value. This is useful when writing sass library files. The method for setting default variables is also very simple. You only need to add!defaultYou can.

$color: #ccc;$color: #000 !default;p {    color: $color;}

SASS also supports multi-value variables

$colors: #fff #ccc #999 #666 #333;

We can uselength($colors)To obtain the number of values of multi-value variables.nth($colors, index)To obtainindexValue. Ps:indexThe value range is 1length($colors).

$colors: #fff #ccc #999 #666 #333;p::after {  content: "#{length($colors)}";    // 5  color: nth($colors, 1);            // #fff}

2. nesting

SASS supports two nesting modes: Selector nesting and attribute nesting. Nesting greatly reduces the repeated Writing of selector names and attributes.

• Selector nesting
  Selector nesting refers to embedding a child selector from a selector to realize the inheritance relationship of the selector.

.header{   .logo{       display: block;       border: none;   }   ul li{       line-break: normal;   }}

After compilation:

.header .logo {  display: block;  border: none;}.header ul li {  line-break: normal;}

You can also use & to represent the parent element selector. For example, we declare the style of a tag:

a{    text-decoration: none;    &:hover{        color: #007998;    }}

After compilation:

a {  text-decoration: none;}a:hover {  color: #007998;}

• Attribute nesting
  Attribute nesting refers to proposing attributes with words with the same prefix. As a public attribute, attributes are nested into other attributes, just like many people with the same surname, remember the last names of these people only once, followed by different names.

h3{    font:{        size:26px;        weight:normal;        family:arial    }}

After compilation:

h3 {  font-size: 26px;  font-weight: normal;  font-family: arial;}

3. Import the sass or. scss file.

Css has an uncommon feature, that is@importThe import function allows you to import other css files to a css file. However, the result is that only@importWhen the rules are met, the browser downloads other css files, which leads to slow page style loading and thus prone to page flashes.

Sass also has@importThe import rules are different from those in css:@importWhen a css file is generated, the rule imports the relevant file into a file, without the need for a browser to download other files. In addition, variables defined in the imported file can also be used normally in the imported file.

In use@importWhen importing an sass file, you can omit the suffix of the sass file..sassOr.scssFor example:

- a.scss    body {        background-color: #f00;    }- style.scss    @import "a";    div {        color: #333;    }

Compiledstyle.cssThe file content is as follows:

body {    background-color: #f00;}div {    color: #333;}

If you compile the entire sass directory, you will find a problem.style.cssAt the same time,a.cssThis result is not what we want,a.scssAs an intermediate file, css is generally not required. The sass developer also takes this into consideration. We only need to underline the file name._, Sass will ignore this file during compilation,@importYou can also underline or not add a reference. For the above example, we can modify it:

- _a.scss    body {        background-color: #f00;    }- style.scss    @import "a";    div {        color: #333;    }

Import css files

Of course, if you want to import other css files like native css files, sass will recognize that you want to use css native@import:

• The imported file name is.cssEnd
• The imported file is an online url address.
• To@import url(...)Method To import files

4. Notes

Sass supports the annotation format of native css/* Comment */And supports single-line annotations similar to those in js.// Comment content. For single-line comments, sass will delete single-line comments in the generated css file and only keep the native comments of css, for example:

. Test {margin: 10px; // This annotation will not appear in the generated css file color: #333;/* This annotation will appear in the generated css file */}

Of course, if you write multi-line comments where native css is not allowed, sass will erase these comments when compiling and generating css files. For example:

. Test {padding/* This annotation won't appear in the generated css file */: 10px margin: 5px/* This annotation won't appear in the generated css file */10px ;}

5. Functions

In SASS, you can perform simple operations on the attribute values, for example:

$white:#fff;$font12:12px;    .newsize{        font-size: $font12 + 2;        color:$white - #007998;    }

Generated after compilation:

.newsize {  font-size: 14px;  color: #ff8667;}

Of course, in addition to the most basic addition, subtraction, multiplication, division, and Division functions, SASS also provides many other interesting functions, such as our most commonly used color functions lighten and darken ).

.lgt{    color: lighten($black,10%);    background-color: darken($white,50%);}

After compilation, we can get a calculated color value:

.lgt {  color: #1a1a1a;  background-color: gray;}

For more information about functions, see the SASS official function list.

6 mixer mixin simple Mixer

The mixer in sass is generally used to solve the problem of large code duplication. For example, you can use a single line of text that is frequently used to overflow the ellipsis.@mixinTo define a simple mixer:

@mixin ellipsis {    width: 100%;    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;}

Then, we can use@includeTo use this mixer:

.text {    @include ellipsis;}

The output css is:

.text {    width: 100%;    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;}

Parameter-based Mixer

The mixer not only achieves code reuse, but also transmits parameters to generate different css as needed. This is in the cross-browsercss3Compatibility is particularly useful. For example:

@mixin radius($value) {    -moz-border-radius: $value;    -webkit-border-radius: $value;    border-radius: $value;}

You only need to input the corresponding parameter values.

.test {    @include radius(3px);}

The generated css is:

.test {    -moz-border-radius: 3px;    -webkit-border-radius: 3px;    border-radius: 3px;}

In addition, we can also provide default values for parameters, such:

@mixin link-colors($normal: #333, $hover: $normal, $visited: $normal) {    color: $normal;    &:hover {        color: $hover;    }    &:visited {        color: $visited;    }}

During the call, you can pass the parameter or do not:

.text {    @include link-colors;}.error {    @include link-colors(red);}a {    @include link-colors(blue, green, yellow);}

The generated css is:

// Due to space limitations, the generated code has been changed to a single line. text {color: #333 ;}. text: hover {color: #333 ;}. text: visited {color: #333 ;}. error {color: red ;}. error: hover {color: red ;}. error: visited {color: red;} a {color: blue;} a: hover {color: green;} a: visited {color: yellow ;}

7. Inheritance

SASS implements inheritance through @ extend

.pclass{  border: 4px solid #ff9aa9;}.subclass{  @extend .pclass;  border-width: 2px;}

After compilation:

.pclass, .subclass {  border: 4px solid #ff9aa9;}.subclass {  border-width: 2px;}

Although this inheritance is convenient, it also has some drawbacks. For example, we just want to inherit.pclassClass, but does not need.pclass. In other words, our html does notclass="pclass"In this case,.pclassIt is actually redundant.

In this case,sass3.2.0 and later versions provide us with a solution: placeholder selector %.

Placeholder selector %

The placeholder selector has the following advantages: After declaration, if it is not called, it will not generate a similar.pclass. Placeholder Selector%Identity to define, also through@extend.

%pclass{  border: 4px solid #ff9aa9;}.subclass{  @extend %pclass;  border-width: 2px;}

The generated css is:

.subclass {  border: 4px solid #ff9aa9;  border-width: 2px;}

8 sass condition judgment @ if addition judgment

In sass@ifStatement and jsifVery similar. Can be used separately or in combination@else.

$ Lte7: true; // whether ie7 or earlier versions are supported $ theme: yellow ;. clearfix {@ if $ lte7 {zoom: 1 ;}&: after {content :". "; display: block; height: 0; clear: both; visibility: hidden;} body {@ if $ theme = red {background: rgba (255, 0, 0, 0.5);} @ else if $ theme = yellow {background: rgba (255,255, 0, 0.5);} @ else if $ theme = black {background: rgba (0, 0, 0, 0.5 );}}

The generated css is:

.clearfix {    zoom: 1;}.clearfix:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;}body {    background: rgba(255, 255, 0, 0.5);}

Trigger Operation Judgment

The syntax of the Three-object operator is:@if($condition, $condition_true, $condition_false)For example:

$fontBold: true;.title {    font-weight: if($fontBold, bold, normal);}

The generated css is

.title {    font-weight: bold;}

SASS tool:

• Sass online Compilation

• Sass visual compilation tool: Koala

Original article: http://www.ido321.com/1455.html