css、less、sass

38 阅读1分钟

CSS没有变量、函数、SCOPE(作用域)

less、sass: 增加了规则、变量、混入、选择器、继承

.sass文件对代码的排版有着非常严格的要求,而且没有大括号,没有分号; SASS技术的文件的后缀名有两种形式:.sass和.scss

sass

$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
 
body
font: 100% $font-stack
color: $primary-color

scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
 
body {
font: 100% $font-stack;
color: $primary-color;
}

编译出来的css

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

less

/* Less */
@color: #999;
@bgColor: skyblue; //不要添加引号
@width: 50%;
 
#wrap {
    color: @color;
    width: @width;
}
 
/* 生成后的 CSS */
#wrap {
    color: #999;
    width: 50%;
}