Use Sass/scss to write CSS quickly and get started

article Songyang

This article is from the Asura road , prohibited for commercial purposes, reproduced please indicate the source.  

http://blog.csdn.net/fansongy/article/details/ 44964187

/span>

/p>

Why SCSS

CSS is not a programming language, it is just a configuration file, and there is no life. But I wait for the big program how can tolerate oneself write out of things can not dynamically change, can't encapsulate inheritance, can't xxoo, so there is the concept of CSS preprocessing. That is, writing is a set, used is a set. Scss is a choice of CSS preprocessing, it relies on Ruby, is forced aligning higher. Similar to less, the language pros and cons of the dispute is not significant, with a good other is similar.

Installation

With Ruby on your Mac, run directly:

Gem Install Sass

Install the corresponding module, and then you can use:

Sass--watch Style.scss:style.css

command to monitor style.scss, and when it changes, it is automatically compiled into STYLE.CSS.

Friendly tip: I run the gem completely motionless, I thought it was off the net. Later heard is my big gfw mighty, can change the source to x Treasure of the server to solve:

$ gem sources-l$ gem sources--remove https://rubygems.org/$ gem sources-a http://ruby.taobao.org/$ gem sources-l//Then I just updated the ruby version $ sudo gem update--system

After the above toss, smooth installation sass

Common syntax variables

Define $magin:30px; Px$blue: #1875e7; Color$side:left; Str usage:boder-#{$side}-radius

All variables of the numeric type can be calculated accordingly.

Nesting

Nav {    ul {...}    Border: {//Note that the colon is equivalent to the tree attribute compiled into border-color:red        color:red;    }    A {        &:hover {color: $blue;}//& indicates that the reference upper layer will be compiled into a:hover{...}    

Comments

The standard CSS Comment/* Comment * * will persist to the compiled file.

Single-line comments//comment, reserved only in Sass source files, are omitted after compilation.

Add an exclamation point to/* to indicate that this is an "important note." This line of comments is retained even in compression mode compilation, and can often be used to declare copyright information.

Inherited

Use @extend to inherit the appropriate CSS:

. Class1 {    border:1px solid #ddd;}. Class2 {    @extend. Class1;    Border-color:green;}

When writing to pay attention to the order, compile, CSS is not the order, who first who must think well.

Mixin

This is a function of a macro with the illegitimate child. Implement an image function that uses like a macro. Key words for @mixin and @include

@mixin left ($color, $value: 10px) {    color: $color;    Margin-left: $value;}. mydiv {    @include left ($blue, 15px);}

Color processing functions

Lighten (#cc3, 10%)//#d6d65cdarken (#cc3, 10%)//#a3a329grayscale (#cc3)//#808080complement (#cc3)//#33c $linkColor: #0 8c;a {    text-decoration:none;    Color: $linkColor;    &:hover{      Color:darken ($linkColor, 10%);    }}

This way you can make a link gray effect.

Introducing Files

@import "Style2.css";

Logical compilation

If you want to really move, you have to have a judgment, loop the normal flow function.

@if can be used on a single condition or in combination with @else for multi-condition use

$type: monster;p {  @if $type = = Ocean {    color:blue;  } @else if $type = = Matador {    color:red;  } @el Se if $type = = Monster {    color:green;  } @else {    color:black;  }}

The For Loop has two forms, namely: @for $var from <start> through <end> and @for $var from <start> to <end> . $i represents a variable, start represents the starting value, and end represents the end value, the difference being that the keyword through represents the number of the end, and to does not include the end number.

@for $i from 1 through 3 {  . item-#{$i} {width:2em * $i;}}

Each syntax is: @each $var in <list or map> . Where $var represents variables, and list and map represent the list type data and map type data.

$animal-list:puma, Sea-slug, Egret, Salamander, @each $animal in $animal-list {  . #{$animal}-icon {    Background-image:url ('/images/#{$animal}.png ');}  } $headings: (H1:2em, H2:1.5em, H3:1.2em), @each $header, $size in $headings {  #{$header} {    font-size: $size;  }}

Sublime Sub-page

In fact, this can not be regarded as scss knowledge, but it is more convenient to use it. Sublime can be left and right to split the screen, we can put the source file in the left side of the window compiled by the compilation of the side, convenient for us to do check. The shortcut keys on your Mac are more perverted:

Move around using

If you think this article is helpful to you, you can take a Top , not only do not want to be a father, but also let more people can see it ...

Use Sass/scss to write CSS quickly and get started