Using sass/scss to write CSS Quick Start, sassscss

Using sass/scss to write CSS Quick Start, sassscss

Author: Songyang

This article is from Ashura road and is prohibited for commercial purposes. For more information, see the source.

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

Why Scss

CSS is not a programming language. It is just a configuration file and has no life. But how can I wait for a large program to tolerate the dynamic changes, encapsulation, inheritance, and xxoo of what I wrote? So I came up with the concept of css preprocessing. That is, write is a set, and use is a set. Scss is a choice for css preprocessing. It relies on Ruby and is highly demanding. Similarly, there are Less and so on. The competition between good and bad languages is of little significance.

Install

Built-in Ruby on Mac, run directly:

gem install sass

Install the corresponding module, and then use:

sass --watch style.scss:style.css

The command is used to compile style.scss. When the script changes, it is automatically compiled into style.css.

Friendly reminder: I thought it was out of the network when I ran the gem completely. Later I heard that it was my great GFW, which could be resolved by changing the source to xbao Server:

$ Gem sources-l $ gem sources -- remove https://rubygems.org/$ gem sources-a http://ruby.taobao.org/$ gem sources-l // then I conveniently updated Ruby version $ sudo gem update -- system

After the above ups and downs, sass is successfully installed

Common syntax Variables

// Define $ magin: 30px; // px $ blue: #1875e7; // color $ side: left; // str Usage: boder-# {$ side}-radius

All numeric variables can be calculated accordingly.

Nesting

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

Note

The standard CSS comments/* comment */are retained to the compiled files.

Single line comment // comment, which is only stored in the SASS source file and omitted after compilation.

Add an exclamation point after/* to indicate that this is an "important comment ". This line of comments will be retained even in Compressed Mode compilation, which can be used to declare copyright information.

Inheritance

Use @ extend to inherit the corresponding css:

.class1 {    border:1px solid #ddd;}.class2 {    @extend .class1;    border-color: green;}

Pay attention to the sequence when writing. during compilation, css won't adjust the sequence. Who should think about it first.

Mixin

This is a child of a function and a macro. Implement the image function and use the image macro. Keywords: @ 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: #08c;a {    text-decoration:none;    color:$linkColor;    &:hover{      color:darken($linkColor,10%);    }}

Using this method, you can create a link to get grayed out.

Import File

@ Import "style2.css ";

Logical Compilation

If you really want to get started, you have to make a judgment, loop through the regular flow functions.

@ If can be used independently by one condition or in combination with @ else

$type: monster;p {  @if $type == ocean {    color: blue;  } @else if $type == matador {    color: red;  } @else if $type == monster {    color: green;  } @else {    color: black;  }}

A for loop has two forms:@for $var from <start> through <end>And@for $var from <start> to <end>. $ I indicates the variable, start indicates the start value, and end indicates the end value. The difference between the two is that the key word "through" indicates that the number includes the end value, while "to" indicates that the number does not include the end value.

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

The each syntax is as follows:@each $var in <list or map>. $ Var represents variables, while list and map represent list and map 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 page

In fact, this is not the knowledge of Scss, but it is more convenient to use. Sublime can split the screen between left and right. We can put the source file in the left-side window and put the compiled file on the right side for inspection. Shortcuts on Mac are abnormal:

cmd+option+ctrl+2 

Move left and right

cmd+shift+[ 

If you think this article is helpful to you, you can stick to it, not only won't like it, but also let more people see it...