一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

前言

由于近期接手个新项目，并且要求按照设计稿画页面，就想着现用现学下scss，并大体写个css样式库，好减轻以后主题风格的改动带来的工作量。话不多说，开始动手。

CSS书写顺序

开始动手之前，先明确下css的书写顺序

位置属性 (position, top, right, z-index, display, float等)
大小 (width, height, padding, margin)　　
文字系列 (font, line-height, letter-spacing, color- text-align等)　　
背景 (background, border等)
其他 (animation, transition等)

明确书写目的是为了减少浏览器reflow（回流），提升浏览器渲染dom的性能。

控制指令的使用

首先，我们需要新建个scss文件，命名为common.scss。因为开发中，经常用到的css有padding、margin。那我们就在css样式库中先添加这两个。

@for

@for指令可以在限制的范围内重复输出格式，每次按照要求对输出结果做出变动。这个指令包含两种格式：
@for $var from <start> through <end>：条件范围包含<start>和<end>的值
@for $var form <start> to <end>：条件范围只包含<start>的值不包含<end>的值
$var可以是任何变量，<start>和<end>必须说整数值。例如：

// 定义内外边距 遍历 0 - 100
@for $i from 0 through 100 {
    .j-p-#{$i} { padding: $i + px;}
    .j-m-#{$i} { margin: $i + px;}
}

编译为

.j-p-0 { padding: 0px; }
.j-p-1 { padding: 1px; }
...
.j-p-100 { padding: 100px }

.j-m-0 { margin: 0px; }
.j-m-1 { margin: 1px; }
...
.j-m-100 { margin: 100px }

@each

@each指令的格式是：@each $var in <list>，$var可以说任何变量名，而<list>是一连串的值，也就是值列表。
@each将变量$var作用于值列表中的每一个项目，然后输出结果。例如：

@each $direction in left, top, right, bottom {
    .j-padding-#{$direction} { padding-#{$direction}: 1px; }
    .j-margin-#{$direction} { margin-#{$direction}: 1px; }
}

编译为

.j-padding-left { padding-left: 1px; }
.j-padding-top { padding-top: 1px; }
.j-padding-right { padding-right: 1px; }
.j-padding-bottom { padding-bottom: 1px; }
.j-margin-left { margin-left: 1px; }
.j-margin-top { margin-top: 1px; }
.j-margin-right { margin-right: 1px; }
.j-margin-bottom { margin-bottom: 1px; }

将@for和@each合一起，即

// 定义内外边距 遍历 0 - 100
@for $i from 0 through 100 {
    // j-p-10
    .j-p-#{$i} { padding: $i + px; }
    // j-m-10
    .j-m-#{$i} { margin: $i + px; }
    
    @each $direction in left, top, right, bottom {
        // j-p-l-10
        .j-p-#{$direction}-#{$i} {
            padding-#{$direction}: $i + px;
        }
        // j-m-l-10
        .j-m-#{$direction}-#{$i} {
            margin-#{$direction}: $i + px;
        }
    }
}

scss学习(1) —— 控制指令：@for、@each

前言

CSS书写顺序

控制指令的使用

@for

@each