CSS 系列 -- scss 语法、less 语法

前言

学过CSS的人都知道，它不是一种编程语言。

你能够用它开发网页样式，可是无法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来至关费事。

因而有人就开始为CSS加入编程元素，这被叫作"CSS预处理器"(css preprocessor)。它的基本思想是，用一种专门的编程语言，进行网页样式设计，而后再编译成正常的CSS文件。

在众多的CSS预处理器中，scss、less 这两种用得最多，因此掌握其语法对于咱们来讲显得很重要，学会灵活运用比咱们单纯用CSS要高效得多

Scss 语法

简言之能够理解scss是sass的一个升级版本，彻底兼容sass以前的功能和新增一些能力3

1. 变量

SASS的全部变量以$开头

$blue : #1875e7;　
div {
　color : $blue;
}
复制代码

使用场景：颜色常常得重复使用，且颜色值使用RGB、十六进制时要么去记，要么每次都去复制粘贴，这样就显得很麻烦，因此咱们能够用变量代替，写代码的时候会更加的迅速

2. 嵌套

SASS容许选择器嵌套：（相比于CSS，这一点就使得代码的逻辑更加清晰了）

div {
　hi {
　　color:red;
　}
}
复制代码

属性也能够嵌套，好比使用border的众多属性，能够写成：

p {
　border: {
    color: red;
    radius: 5px;
　}
}
复制代码

3. 继承

SASS容许一个选择器，继承另外一个选择器。好比，现有class1：

.class1 {
  border: 1px solid #ddd;
}
复制代码

class2要继承class1，就要使用@extend命令：

.class2 {
　@extend .class1;
  font-size: 120%;
}
复制代码

4. 模块复用、传参

使用@mixin命令，定义一个代码块

@mixin left {
  float: left;
  margin-left: 10px;
}
复制代码

使用@include命令，调用这个代码块

div {
  @include left;
}
复制代码

mixin的强大之处，在于能够指定参数和缺省值

@mixin left($value: 10px) {
　float: left;
　margin-right: $value;
}
复制代码

使用的时候，根据须要加入参数：

div {
　@include left(20px);
}
复制代码

下面是一个mixin的实例，用来生成浏览器前缀：

// 设置模块
@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
　-moz-border-radius-#{$vert}#{$horz}: $radius;
　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

// 使用的时候，能够像下面这样调用：
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
复制代码

5. 运算

SASS容许在代码中使用算式：

body {
　margin: (14px/2);
　top: 50px + 100px;
　right: $var * 10%;
}
复制代码

6. 条件语句

@if能够用来判断：

p {
　@if 1 + 1 == 2 { border: 1px solid; }
　@if 5 < 3 { border: 2px dotted; }
}
复制代码

配套的还有@else命令：

@if lightness($color) > 30% {
　background-color: #000;
} @else {
　background-color: #fff;
}
复制代码

7. 循环语句

SASS支持@for循环：

@for $i from 1 to 10 {
　.border-#{$i} {
　　border: #{$i}px solid blue;
　}
}
复制代码

也支持@while循环：

$i: 6;
@while $i > 0 {
　.item-#{$i} { width: 2em * $i; }
　$i: $i - 2;
}
复制代码

@each命令，做用与for相似：

@each $member in a, b, c, d {
　.#{$member} {
　　background-image: url("/image/#{$member}.jpg");
　}
}
复制代码

8. 自定义函数

SASS容许用户自定义函数

@function double($n) {
　@return $n * 2;
}

#sidebar {
　width: double(5px);
}
复制代码

less 语法

1. 变量

@width: 10px; 
@height: @width + 10px; 
#header { 
  width: @width; 
  height: @height; 
}
复制代码

将被编译为：

#header { 
  width: 10px; 
  height: 20px; 
}
复制代码

2. 嵌套

#header { 
  color: black; 
  .navigation { 
    font-size: 12px; 
  } 
  .logo { 
    width: 300px; 
  } 
}
复制代码

若是用到伪类选择器，能够使用&来表示当前选择器的父级

.clearfix { 
  display: block; 
  zoom: 1; 
  &:after { 
    content: " "; 
    display: block; 
    font-size: 0; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
  } 
}
复制代码

媒体查询@media（@规则中的一种）也能够看做选择器同样进行嵌套

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

// 会被编译为：

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}
复制代码

3. 变量做用域

先在当前选择器里面寻找变量和混合（mixins），若是找不到，则从“父”级做用域继承

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
复制代码

3. 模块复用

// 定义模块
.bordered { 
  border-top: dotted 1px black; 
  border-bottom: solid 2px black; 
}
// 使用模块
#menu a { 
  color: #111; 
  .bordered(); 
} 
.post a { 
  color: red; 
  .bordered(); 
}
复制代码

4. 运算

算术运算符 +、-、*、/ 能够对任何数字、颜色或变量进行运算。若是可能的话，算术运算符在加、减或比较以前会进行单位换算。计算的结果以最左侧操做数的单位类型为准。

// 全部操做数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
复制代码

5. 函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。

函数的用法很是简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增长 5%，以及颜色亮度下降 25% 而且色相值增长 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}
复制代码

安装使用

scss 安装指南

经过 npm 安装

npm install sass -g
复制代码

less 安装指南

经过 npm 安装

npm install less -g
复制代码

浏览器使用

<script src="less.js" type="text/javascript"></script>
复制代码

写在最后

有些语法看起来显得有些鸡肋，但先学着，或者收藏起来做教程文档，等之后遇到需求也许就用获得了呢

参考文章

• sass 用法指南
• sass 官方文档
• less.js 中文文档
• sass 与 scss 的区别