Get started quickly with writing CSS using sass/scss_html/css_WEB-ITnose

Author of the article: Songyang

Why Scss

CSS is not a programming language, It is just a configuration file and has no life. But how can I, a large program, tolerate that the things I write cannot change dynamically, cannot be encapsulated and inherited, and cannot be xxoo, so the concept of CSS preprocessing came into being. That is, writing is one thing and using it is another thing. Scss is an option for css preprocessing. It relies on Ruby and is relatively high-quality. Similar ones include Less and so on. The debate about the quality of languages ​​is of little significance. It is similar to using one of the others well.

Installation

Ruby comes with Mac, just run:

gem install sass

to install the corresponding module, and then you can use:

sass --watch style.scss:style.css

command Monitor style.scss and automatically compile it into style.css when it changes.

Friendly reminder: When I ran the gem, it didn’t move at all. I thought it was disconnected. Later I heard that it was because of my great GFW power that I could change the source to xbao’s server to solve the problem:

$ gem sources -l$ gem sources --remove https://rubygems.org/  $ gem sources -a http://ruby.taobao.org/$ gem sources -l//然后我顺手更新了一下Ruby的版本$ sudo gem update --system 

After the above troubles, sass was successfully installed

Common syntax

Variables

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

All numeric type variables can be calculated accordingly.

Nested

nav {    ul {...}    border : { //注意冒号 相当于树形属性 会编译成 border-color:red        color : red;    }    a {        &:hover { color :$blue;} //&表示引用上层 会编译成 a:hover{...}    }} 

Comments

Standard CSS comments /* comment */ will be retained in the compiled file.

Single-line comment // comment, only retained in the SASS source file, will be omitted after compilation.

Add an exclamation mark after /* to indicate that this is an "important comment". Even when compiling in compressed mode, this line of comments will be retained and can usually be used to declare copyright information.

Inherit

Use @extend to inherit the corresponding css:

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

Pay attention to the order when writing. When compiling, the css will not adjust the order. Who You have to decide which one comes first.

Mixin

This is the illegitimate child of a function and a macro. To implement like functions, use like macros. The keywords are @mixin and @include

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

Color processing function

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 to create a link graying effect

Introduction file

@import "style2.css";

Logic compilation

If you want to really move it, you have to make judgments and loop through regular process functions.

@if can be used alone as a condition, or can be used in combination with @else for multiple conditions

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

The for loop has two forms, namely: @for $var from and @for $var from to . $i represents a variable, start represents the starting value, and end represents the end value. The difference between the two is that the keyword through represents the number end, while to does not include the number end.

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

The syntax of each is: @each $var in . Among them, $var represents variables, while list and map represent 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 paging

Actually, this is not considered Scss knowledge, but it is just more convenient to use it. Sublime can split the screen left and right. We can put the source file in the window on the left and the compiled one on the right to facilitate our inspection. The shortcut keys on Mac are quite perverted:

cmd+option+ctrl+2 

Use to move left and right

cmd+shift+[ 

If you think this article is helpful to you, you can give it a like, not only I won’t be happy to be a father, but I can also let more people see it...