前言
学过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 语法
推荐一篇不错的文章：学习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>
写在最后
有些语法看起来显得有些鸡肋，但先学着，或者收藏起来作教程文档，等以后遇到需求也许就用得到了呢
