Study Notes Summary---about SASS

Today, we share with you a little bit of knowledge about SASS:

the production of sass :

CSS is not a programming language, and we can use it to develop Web page styles, but not to program them. It has no constants, no variables, no conditional statements, just a description of the property line, which is almost always described on the data: It's a designer's tool, not a programmer's tool. In fact, it is not so perfect in the programmer's eyes, its writing needs a little bit of manual typesetting, which not only increases the programmer in the process of programming difficulties, but also make later maintenance work becomes complicated. In this case, the CSS preprocessor (CSS preprocessor) emerged. The CSS preprocessor consists of the following main types:

• Sass (SCSS)
• Less
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

Among the many CSS preprocessor languages, the most used are sass,less and stylus. And today is mainly about the use of sass (SCSS).

Sass is an extension to CSS that makes the CSS language more powerful and elegant. It allows you to use variables, nested rules, mixins, import, and many more, and is fully compatible with CSS syntax.

Sass has two suffix files: a suffix named sass, no curly braces and semicolons, and the Scss file we use here, similar to the CSS file format we normally write, using curly braces and semicolons.

Since it is to solve the CSS in the development of the shortcomings of the style, sass (SCSS) The advantages, in fact, it has been obvious, it provides a lot of convenient wording, not only greatly save the development time, but also make the development of CSS easy to maintain.

Step1:

There are three ways to use Sass: command-line tools, standalone ruby modules, and plug-ins that include Ruby on Rails and Merb as frameworks that support Rack. The first step in all of these approaches is to install the Sass gem:

gem install sass

If you're using Windows, you'll need to install Ruby first.

If you want to run Sass on the command line, simply enter

sass input.scss output.css

You can also command Sass to monitor file changes and update the CSS:

sass --watch input.scss:output.css

If you have many Sass files in your directory, you can also command Sass to monitor the entire directory:

sass --watch app/sass:public/stylesheets

Use sass --help to list the complete help document.

It's very easy to use Sass in Ruby code. After installing the Sass gem, you can execute it require "sass" , and then you can use {Sass::engine} like this:

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)engine.render #=> "#main { background-color: #0000ff; }\n"

Download install Ruby (URL: Http://rj.baidu.com/soft/detail/22711.html?ald) Reference installation tutorial (http://jingyan.baidu.com/article/ 48b558e33558ac7f38c09aee.html);

Step2: Similar to CSS is the way the file is built, we need a sass folder, which is placed in our Sass file, suffix named. scss. For example: Index.scss, which writes the style we want to write, the style that is written here can automatically generate the canonical CSS style and save it to the Index.css file.

step3: You can also use the following command to let Sass listen to a file or directory, once the source file changes, automatically generate a compiled version.

Sass--watch Sass/index.scss:style/index.css

You can also use CTRL + C to cancel the listener.

Basic usage of SASS

1, (1) different from less @,sass use $ to define variables, the definition of variables should be careful not to make the name ambiguous, to be semantically.

For example:

$w: 100px;

$h: 100px;
#div {
Width: $w;
Height: $h;
background:red;
}

(2) If a variable needs to be embedded in a string, it must be written in #{}.

$w: 100px;

$h: 100px;

$side: Left;

#div {
Width: $w;
Height: $h;
background:red;

border-#{$side}-radius:50%;
}

2. Calculation function

SASS allows you to use a calculation in your code:

Body {
Margin: (14PX/2);
top:50px + 100px;
Right: $var * 10%;
}

(This example is from http://www.ruanyifeng.com/blog/2012/06/sass.html)

3. Nesting

Sass allows selectors to be nested, for example:

will be compiled into

This avoids the repetition of writing the parent selector, which is a complex CSS nesting layout that becomes simple.

4. Reference Parent Selector &

& will be replaced with the parent selector at compile time and output to CSS. Sometimes it is more convenient to use nested rules to refer to a parent selector by & than to write a style in a way that is generally the default nesting. For example, when a selector has a hover worth the time or the BODY element has a special class. In this case, you can clearly indicate where the parent selector is inserted through &. For example:

will be compiled into

(Off the net ...) The following is still the code in writing, you can not insert the picture ... Sorry ... ）

5. Nested properties

(1) CSS has properties such as Font-family,font-size,font-weight, and in CSS, if you want to set them up, you need to list them all in one place. While Sass provides a shorthand form, only one font is written, and other subordinate properties can be nested inside, for example:

. Funky {
Font: {
Family:fantasy;
Size:30em;
Weight:bold;
}
}

will be compiled as:

. Funky {
Font-family:fantasy;
Font-size:30em;
Font-weight:bold; }

(2) The font itself can also have value, for example:

. Funky {
font:2px/3px {
Family:fantasy;
Size:30em;
Weight:bold;
}
}

will be compiled as:

. Funky {
font:2px/3px;
Font-family:fantasy;
Font-size:30em;
Font-weight:bold; }

6, the comment character:

Sass, like CSS, supports multiline comment/**/and single-line comments//;

7, the code reuse:

(1) Inheritance: Sass allows a selector to inherit from another selector.

For example:

$w: 100px;
$h: 100px;

#demo1 {
  Width: $w;
  Height: $h;
  background:red;
}

Now Demo2 to inherit the Demo1 style, which can be written as:
#demo2 {
@extend #div;
}

7, Mixin
(1) The use of Mixin is: using the @mixin command,
For example:

@mixin reset{
margin:0;
padding:0;
Position:absolute;
left:0;
top:0;
width: $w;
height: $h;
}

using the @include command, call this mixin

#demo1 {
@include Reset;
Background:green;
}
 (2) The power of mixin is that it is possible to specify parameters and default values. ( This example is from http://www.ruanyifeng.com/blog/2012/06/sass.html)
@mixin Left ($value: 10px) {
Float:left;
margin-right: $value;
}

when used, add parameters as needed:

Div {
@include Left (20px);
}

The following is an example of a mixin that is used to generate a browser prefix.

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

When used, it can be called as follows:

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

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

Finally, to give you a little bit of knowledge about Sass,less,stylus:

  SASS2007, the first and most mature CSS preprocessor, with the support of the Ruby community and Compass, the most powerful CSS framework, currently affected by less, has evolved to fully compatible with CSS Scss.

  LESS2009 years, affected by sass, but also using CSS syntax, so that most developers and designers more easy to get started, outside the Ruby community, supporters far more than sass, the disadvantage is that compared to sass, programmability is not enough, but the advantage is simple and compatible with CSS, In turn, the sass evolved into the scss era, with the famous Twitter bootstrap using less as the underlying language.

  stylus,2010, from the node. JS community, is used primarily for CSS preprocessing support for node projects, there are supporters within the community, and in a wide sense the popularity is not as good as sass and less. Summary: Sass looks like an advantage in providing features, but less allows developers to smoothly transition from existing CSS files to less without needing to convert CSS files into SASS format as sass.
Stylus is more robust and more connected to JS. (End of presentation, transfer from https://zhidao.baidu.com/question/2076835432627765028.html)

Just write it here today, and you are welcome to add it.

Learning Notes Summary---about SASS