Sass-Maybe you want to play with CSS (Part 1)

We work hard, we persist, and we encourage each other!

As we all know, CSS is not actually a programming language. Anyone familiar with CSS knows that the full name of CSS is Cascading Style Sheets (cascading style sheets). It is an application used to express HTML (an application of Standard General Markup Language) or XML (Standard General Markup Language). a subset) and other file-style computer languages. We use it to achieve the separation of the presentation layer and the structure layer, that is, the separation of html and styles. You can use it to style web pages, but it cannot declare variables, call functions, or use conditional statements like JavaScript. It can be said that JavaScript is flexible and dynamic, while CSS is rigid and unchanging.

So, some people want to add programming ideas to it, so that they can have traversal, methods, and even inheritance, and can tell you grammatical errors, so with css preprocessing, the idea is to first use a A new specialized programming language is used to design web page styles and then compiled into css. In fact, the compiled css is still referenced in the end.

Speaking of css preprocessing, most people may first think of Less. Less is one of the better languages ​​for CSS preprocessing now: it is fast, convenient and easy to get started with. Sass is the second one: relatively speaking, it is more flexible and has more syntax (especially if, else, for). Of course, many people The reason for not using it is that it is inconvenient to install (fortunately, there is a Taobao mirror). The third reason is Stylus: it is similar to sass and is more flexible and powerful. Here, because I prefer Sass and believe it will not die so soon, I will give a brief introduction to Sass.

Think about when we can use css preprocessing

It is true that css preprocessing allows us to process styles more programmatically, but we still need to consider the environment in which it is used, because we know that no matter how cool your sass code is and how rigorous your logic is, in the end A css file is generated (the teachings of the old seniors to the young me).

So we need to determine based on the size of the project and the development time and team cost. If the project is relatively small and does not require too much css and the development time is tight and many people in the team do not know how to use it, then it may be better to use native css. Some.

sass basics

Installation~

Ahem, I have to say that many developers originally wanted to use sass, but because sass is based on ruby, there is a high wall, and ruby ​​cannot be installed for a long time, so they gave up. It is recommended that you take a look at the W3Cplus tutorial and use Taobao images to install it. Including the installation of some packages of node, I use Taobao images to install them. It is very fast and powerful.

Compile~

Ahem, many friends have installed it, but find it very troublesome to compile. Here is the link to the sass compilation tutorial. I recommend you to use Koala for compilation. Although Koala has stopped updating, it is indeed very practical. Less and sass can be compiled, and can be compressed during compilation.

sass and scss

Let’s take a look at the differences first

<span style="color: #800000;">$color : red;

//sass语法
.box
    color:$color;

//scss语法
.box</span>{<span style="color: #ff0000;">
　　color</span>:<span style="color: #0000ff;">$color</span>;
}

In fact, sass syntax is the initial grammatical structure of sass. It is a rule implemented through tab indentation. It is somewhat similar to the indentation of jade templates. Moreover, this grammatical rule is very strict. If anything is wrong, an error will be reported during compilation.

Scss is the new grammatical format of sass. Don’t think of it as another pre-processing language. In fact, it is a grammatical structure that was re-customized by sass after it was discovered that the previous grammatical structure was too strict and somewhat different from css. It is basically the same as CSS in appearance, and it is very loose. You can directly copy the previous CSS code.

I wrote it in a code block here just as an example. In fact, their file names end with .sass and .scss respectively.

Variable declaration and calling

This is one of the basic programming elements of sass. In JS we use var to declare variables. Of course, let and const are newly added in ES6. The rules for declaring and calling variables in sass are as follows

<span style="color: #800000;">$height: 15px !default;  //声明默认变量
$height: 50px;　　//声明普通变量
body</span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> $height</span>; 
}

Variables are divided into default variables and ordinary variables. For default variables, just add !default after the value like !important. In fact, generally we only need to declare ordinary variables. Default variables are more convenient to use when developing components. I don’t need to explain the variable declaration, it’s really simple.

Nested and local variables, global variables

Similar to JS, there are local variables and global variables in sass syntax. As shown below, global variables are declared in the outermost layer and can be called in the global scope. Local variables of em are declared in em{} and can only be called within em{}.

<span style="color: #800000;">$color:#000;　　//全局变量
.block </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> $color</span>;
}<span style="color: #800000;">
em </span>{<span style="color: #ff0000;">
  $color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">　　//局部变量
  a {    //选择器嵌套
    color</span>:<span style="color: #0000ff;"> $color</span>;<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;"> {    //属性嵌套
　　  size: 12px</span>;<span style="color: #ff0000;">
　　  weight</span>:<span style="color: #0000ff;"> bold</span>;
　  }<span style="color: #800000;">
    &:hover </span>{ //伪类嵌套<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;"> $color</span>;
    }<span style="color: #800000;">   
  }
}</span>

数据类型

 和JS类似，sass也拥有自己的数据类型分别是

• 数字: 如，1、 2、 13、 10px；
•  字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
•  颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
•  布尔型：如，true、 false；
•  空值：如，null；
•  值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

混合宏

编程的思想嘛。混合宏是一个类似于函数的存在，当然，他并不是函数。简单来说就是加了参数功能的灵活度提升的可重用的代码块。

<span style="color: #800000;">@mixin border-radius</span>{<span style="color: #ff0000;">
    -webkit-border-radius</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 5px</span>;
}<span style="color: #800000;">

button </span>{<span style="color: #ff0000;">
    @include border-radius;
</span>}

这里是一个简单的混合宏的使用，先是用@mixin定义了一个名叫border-radius的混合宏，然后在代码中利用@include进行调用，其实这样的话并不能太大体现出混合宏的特色。看下面的

<span style="color: #800000;">@mixin border-radius1($radius)</span>{<span style="color: #ff0000;">
  -webkit-border-radius</span>:<span style="color: #0000ff;"> $radius</span>;<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> $radius</span>;
}<span style="color: #800000;">
@mixin border-radius2($radius:5px)</span>{<span style="color: #ff0000;">
  -webkit-border-radius</span>:<span style="color: #0000ff;"> $radius</span>;<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> $radius</span>;
}<br><br><span style="color: #800000;">
.box1 </span>{<span style="color: #ff0000;">
  @include border-radius(5px);
</span>}<span style="color: #800000;">
.box2 </span>{<span style="color: #ff0000;">
  @include border-radius;
</span>}<span style="color: #800000;">
.box2 </span>{<span style="color: #ff0000;">
  @include border-radius(5px);
</span>}

从代码里可以看出，混合宏可以像函数一样传入参数，并且可以像ES6的函数扩展一样添加参数默认值，如果在调用的时候不传参数，那么就会使用默认的值，这样极大的增加了代码的灵活性，省却很多开发时间。

其实，mixin的灵活还不仅仅如此，它可以传入多个参数，这样我们想到了函数可以根据参数数量的不同来执行不同的代码。yes ！sass也可以做到！

<span style="color: #800000;">@mixin size($width,$height)</span>{<span style="color: #ff0000;">    //两个参数或者多个参数可以这样这样定义
  width</span>:<span style="color: #0000ff;"> $width</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> $height</span>;
}<span style="color: #800000;">

.box-center </span>{<span style="color: #ff0000;">
  @include size(100px,200px);
</span>}

<span style="color: #800000;">@mixin box-shadow($shadows...)</span>{<span style="color: #ff0000;">    //参数过多可以使用...来代替
  @if length($shadows) >= 1 {
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> $shadows</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> $shadows</span>;
  }<span style="color: #800000;"> @else </span>{<span style="color: #ff0000;">
    $shadows</span>:<span style="color: #0000ff;"> 0 0 2px rgba(#000,.25)</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> $shadow</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> $shadow</span>;
  }<span style="color: #800000;">
}<br></span>

.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

上面两个代码块第一个比较简单，就是增加参数数目。下面的代码块我们利用sass的if else方法来实现了判断，如果参数数目大于等于1，也就是传了参数，那么我们执行上面的代码，如果没有传参我们执行下面的代码，设置默认的$shadows值生成代码块。

但是混合宏也有不足之处：那就是调用一个混合宏生成的css代码并不会进行合并，这也是因为他能够传参所设置的，所以对于复用性很强的代码块不推荐使用混合宏。

继承和占位符

sass允许你使用@extend继承别的代码块，并且通过@extend所继承的代码块会在生成css的时候进行合并~哈哈，完美解决了上面的问题

<span style="color: #800000;">.btn1 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>;
}<span style="color: #800000;">

%btn2 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>;
}<span style="color: #800000;">
<br></span>

%btn3 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

<span style="color: #800000;">
.btn-primary1 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  @extend .btn1;
</span>}<span style="color: #800000;">

.btn-primary2 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  @extend %btn2;
</span>}

上面的代码中.btn1是预先定义好的类，然后我们在.btn-primary1中继承他的所有代码块，而%btn2就是在标题里所提到的占位符，占位符的代码块如果不被继承在生成的css中是不会显示出来的，所以如果你是用sass编译css的话，公共类使用占位符来定义是一个很不错的选择。为了加深理解我们看下上面的代码所生成的css代码。

<span style="color: #800000;">.btn1, .btn-primary1 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>; }<span style="color: #800000;">

.btn-primary2 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>; }<span style="color: #800000;">

.btn-primary1 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>; }<span style="color: #800000;">

.btn-primary2 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>; }

继承btn1的btn-primary1他和btn1进行了合并，而我们使用占位符定义的%btn2，%btn3在生成代码里没有显示，因为btn-primary2继承了%btn2，所以他继承的公共部分被单独拿出来，如果有多个代码块继承%btn2，他们会进行合并。

 

占位符还是混合宏，主要还是看你的代码怎么使用，如果只是静态的代码公共块，那么占位符会比较适合，而如果是可变的代码例如写一个复杂的css3动画之类的，可能混合宏比较适合了。

 

插值#{}

如果接触过jade模板的朋友会比较熟悉，这里的插值和它用法是基本一致的。让我们来看一个复杂的代码块

<span style="color: #800000;">$properties: (margin, padding);
@mixin set-value($side, $value) </span>{<span style="color: #ff0000;">
    @each $prop in $properties {
        #{$prop</span>}<span style="color: #800000;">-#</span>{<span style="color: #ff0000;">$side</span>}<span style="color: #800000;">: $value;
    }
}
.login-box </span>{<span style="color: #ff0000;">
    @include set-value(top, 14px);
</span>}

首先我们声明了一个$properties的变量，里面是一个值列表里面两个字符串，@mixin方法里我们通过@each方法循环出值列表里面的字符串然后利用插值的方法将字符串插入进去，我们看下生成的css代码

<span style="color: #800000;">.login-box </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
  padding-top</span>:<span style="color: #0000ff;"> 14px</span>; }

这里只是做一个示例，正常情况下我们不会用这么复杂的方法来生成这么短的css代码，那样才是真正的浪费开发时间，当然茶余饭后做个组件开发的话，还是很有用的。

运算

sass允许我们做一些基本的运算：加减乘除，但是我要说的是：注意单位！注意单位！注意单位！当然如果你异想天开em+px，px*px，px/rem。。。我表示。。。

需要知道的是sass里允许进行颜色运算，也就是说 #222222 * 2你将会得到 #444444，其实颜色的运算机制是分段运算也就是说如果22*2  22*2  22*2然后在进行合并的。

字符串运算：

字符串可以通过+来进行链接，放心减号是不管用的。。。需要注意的是因为sass的字符串有两种类型，带引号和不带引号，相同相加当然出来的是一致的。如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串，其实就是谁在左边就跟着谁。

<span style="color: #800000;">p:before </span>{<span style="color: #ff0000;">
  content</span>:<span style="color: #0000ff;"> "Foo " + Bar</span>;<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> sans- + "serif"</span>;
}<span style="color: #800000;">
//生成的css如下
p:before </span>{<span style="color: #ff0000;">
  content</span>:<span style="color: #0000ff;"> "Foo Bar"</span>;<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> sans-serif</span>; }

 

上面的内容就是sass的上篇。都是一些基础的东西，下篇的话会整理一下说到函数和方法规则相关的东西。