Sass, sassless

Sass, sassless

Note: For details, refer to the Sass and Compass designer guide.

Sass is a command line tool based on the Ruby programming language. To use Ruby, you must first install Ruby on your computer. for Ruby installation, visit http://rubyinstaller.org/downloads/to download the latest version of ruby. after installation, you can use Ruby-v to verify whether the installation is successful.

Sass Installation

Install using Ruby's own RubyGems System

$ gem install sass

Use sass-v to verify whether the installation is successful

Sass usage

sass test.scss

The css code converted from the. scss file can be displayed on the command line.

sass test.scss test.css

You can save the result displayed on the command line as a file.

Sass provides the compilation style: 1. nested: nested indent CSS code, which defaults to 2. expanded: unindented, extended CSS code 3. compact: concise CSS Code 4. compressed: compressed CSS code

Compilation style usage:

sass  --style compressed test.scss test.css

Let Sass listen to a file or directory. Once the source file is changed, the compiled version listening file is automatically generated.

sass --watch input.scss:output.css

Listening directory

sass --watch app/sass:public/stylesheets

Sass Syntax 1, old version. the syntax of the sass suffix is a syntax rule that is Indented by the tab key. It has strict requirements and does not contain any braces or semicolons. It is prone to errors, not very accepted (Python programmers should like it) 2 ,. the new syntax format of the scss suffix sass is almost identical to that of CSS, and the code is enclosed in a pair of braces, there is a semicolon at the end of the end. 1. All variables of the variable start with $.

$blue : #1875e7;div {    color : $blue;}

If the variable needs to be nested in a string, it must be written in # {}.

$side : left;.rounded {    border-#{$side}-radius : 5px;}

2. computing functions

body {    margin : (14px/2);    top : 50px + 100px;    right: $var * 10%;}

3. nesting

div h1 {    color: red;}

Can be written:

div {    h1 {        color: red;    }}

Attributes can also be nested:

p {    border: {        color: red;    }}

Note: The border must be followed by a colon.

In a nested code block, you can use & reference the parent element. For example, a: hover can be written

a {    &:hover{ color: #ffb3ff;}}

4. Comments to standard CSS comments/**/will be retained to a single line of comments in the compiled CSS file. It will only be retained in the SASS file, after compilation, It is deleted and added after !, This is an important comment. This line of comment will be retained even if it is compiled in compression mode. It can be used to declare copyright information /*! Important Notes */code reuse 1. Inheritance

SASS allows one selector to inherit from another selector. Example:

.class1 {    border: 1px solid #ddd;}

To Inherit class1, use the @ extend Command

.class2 {    @extend .class1;    font-size: 100%;}

2. MixinMixin is a bit like a macro (macro) in C language. It is a reusable code block. Use @ mixin to define a code block.

@mixin left{    float: left;    margin-left: 10px;}

Use the @ include command to call this macro.

div {    @include left;}

The power of mixin is that you can specify parameters and default values.

@mixin left($value: 10px) {    float: left;    margin-left: $value;}

Enter parameters as needed

div {    @include left(20px);}

Example:

@mixin rounded($vert, $horz, $radius: 10px) {    border-#{$vert}-#{$horz}-radius: $radius;    -moz-border-radius-#{$vert}#{$horz}: $radius;    -webkit-border-#{$vert}-#{$horz}-radius: $radius;}

Note: The vendor prefixes supported by Firefox are non-standard-moz-border-radius-topleft, instead of-moz-border-top-left-radius.

Call

#navbar li { @include rounded(top, left); }#footer { @include rounded(top, left, 5px); }

3. Color Functions

lighten(#cc3, 10%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#cc3) // #33c

4. Insert file @ import command to insert external file @ import "path/filename. scss "; if a css file is inserted, it is equivalent to the css import command @ import into foo.css"; advanced usage 1. Condition Statement

@ If can be used to determine:

p {    @if 1 + 1 == 2 {border: 1px solid #ddd; }    @if 5 < 2 {border: 2px dotted #ccc; }}

And @ else

@if lightness($color) > 30% {    background-color: #000;} @else {    background-color: #fff;}

2. Loop statements

For Loop

@for $i from 1 to 10 {    .border-#{$i} {        border: #{$i}px solid blue;    }}

While Loop

$i: 6;@while $i > 0 {    .item-#{$i} {width: 2em * $i; }    $i: $i - 2;}

Each loop

@each $member in a, b, c, d {    .#{$member} {        background-image: url("test.jpg");    }}

3. User-Defined Functions

@function double($n) {    @return $n * 2;}#sidebar {    width: double(2px);}

Note: Reference from: http://www.ruanyifeng.com/blog/2012/06/sass.html