First time using Sass

Look at the sass tutorial of senior materliu on MOOC.com, http://www.imooc.com/learn/364. By the way, I will restructure the project I just finished and write down some notes and experiences here~

　First install sass, here you can directly refer to Senior Desert’s installation tutorial http://www.w3cplus.com/sassguide/install.html.

　 Then install compass, type the command in ruby ​​command, gem install compass. At this stage, I don’t understand much about compass. After watching the sass video, I feel that it is only used to compile scss files and compress css for the time being. (fog).

Compass command:

　compass create compass；

　Compass watch;

　Sass syntax:

When the file does not need to be compiled, it can be marked with _ prefix and underscore and then named. Usually functions or variables are placed in a folder.

　You can use import to import files, and the file name suffix does not need to be written. However, this is not a native CSS import.

　Two major disadvantages of native CSS import: 1. It must be placed at the front of the code. 2. It is detrimental to performance. If you really want to use native import, then: 1. When it ends with css. 2. Start with http://. 3. URL() function. 4. With media queries.

　 Sass variables: Good thing. For example, every time you look for a color, you can’t remember the color code. If you use variables, you don’t have to look for the color code so slowly. You can just look at the variable file and it will be clear at a glance.

　Special variables, variables used in specific situations;

　　eg：

　　

<span style="color: #800000;">//普通变量及其使用
$common-ff :"微软雅黑"; //字体设置
body</span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> $common-ff</span>;
}<span style="color: #800000;">
//css输出----
body</span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;
}<span style="color: #800000;">

//特殊变量
$direction: top;
//应用于class和属性
.border-#</span>{<span style="color: #ff0000;">$direction</span>}{<span style="color: #ff0000;">
  border-#{$direction</span>}<span style="color: #800000;">:1px solid #ccc;
}
//应用于特殊属性同理</span>

　 Multi-valued variable: As the name suggests, it means multiple values. For example, 0 1px 2px 3px and so on. There are many functions in it, and I have only used append($list,$value,[$separator]) for the time being.

Mixin: declared through @mixin, called by @include;

When I was working on a project, I used Flexible to write a lot of styles like this

<span style="color: #800000;">button,input,textarea</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;
}<span style="color: #800000;">
[data-dpr="2"] button,
[data-dpr="2"] input,
[data-dpr="2"] textarea</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 24px</span>;
}<span style="color: #800000;">
[data-dpr="3"] button,
[data-dpr="3"] input,
[data-dpr="3"] textarea</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 36px</span>;
}

It’s too troublesome to write like this, so after learning sass, I wrote one myself by referring to the hybrid macros they wrote on Taobao.com

<span style="color: #800000;">@mixin property-dpr($property,$px-values)</span>{<span style="color: #ff0000;">
        //判断参数是不是单个数字，若是
        @if type-of($px-values) == "number"{
                #{$property</span>}<span style="color: #800000;">: $px-values;
            [data-dpr="2"] & </span>{<span style="color: #ff0000;">
                #{$property</span>}<span style="color: #800000;">: $px-values * 2;
            }
            [data-dpr="3"] & </span>{<span style="color: #ff0000;">
                #{$property</span>}<span style="color: #800000;">: $px-values * 3;
            }
        }
        //若为数组则
        @else </span>{<span style="color: #ff0000;">
            //新建两个空数组
            $twodpr-values</span>:<span style="color: #0000ff;">()</span>;<span style="color: #ff0000;">
            $threedpr-values</span>:<span style="color: #0000ff;">()</span>;<span style="color: #ff0000;">
            //遍历多值变量
            @each $value in $px-values{
                $twodpr-values</span>:<span style="color: #0000ff;">append($twodpr-values,$value*2)</span>;<span style="color: #ff0000;">
                $threedpr-values</span>:<span style="color: #0000ff;">append($threedpr-values,$value*3)
            </span>}<span style="color: #800000;">
            // 返回处理后的多值变量
               #</span>{<span style="color: #ff0000;">$property</span>}<span style="color: #800000;">: $px-values;
                [data-dpr="2"] & </span>{<span style="color: #ff0000;">
                    #{$property</span>}<span style="color: #800000;">: $twodpr-values;
                }
                [data-dpr="3"] & </span>{<span style="color: #ff0000;">
                    #{$property</span>}<span style="color: #800000;">: $threedpr-values;
                }
        }
}</span>

　css, sass generated code:

<span style="color: #800000;">//调用mixin
div</span>{<span style="color: #ff0000;">
    @include property-dpr(font-size,12px);
</span>}<span style="color: #800000;">
//css style
div </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 12px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> line 7, ../../sass/common/_mixin.scss </span><span style="color: #008000;">*/</span><span style="color: #800000;">
[data-dpr="2"] div </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 24px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> line 10, ../../sass/common/_mixin.scss </span><span style="color: #008000;">*/</span><span style="color: #800000;">
[data-dpr="3"] div </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 36px</span>;
}

　That’s it for today.