一. Sass/Scss、Less是什么?
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。
Sass与Scss是什么关系?
Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
二. Sass/Scss与Less区别
1.编译环境不一样
sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器
2、标识变量的方法不同 Less是@，而Scss是$，
3、而且变量的作用域也不一样
在sass 3.4.0之前，sass可以说是没有局部变量和全局变量之分的，即后声明的同名变量总是会覆盖之前的同名变量，不管后声明的变量是位于何处。
4.Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
三 less/scss讲解
scss
1、变量 $
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
将局部变量转换为全局变量可以添加 !global 声明：
#main {
$width: 5em !global;
width: $width;
}
2、Mixins
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(blue, red, green);
}
3. 嵌套CSS 规则;
article a {
color: blue;
&:hover { color: red }
h1, h2, h3 {margin-bottom: .8em}
}
4、计算
p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
}
5、控制 @if @else @for $var from to @each $var in @while
@if @else
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
@for $var from to
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
@each
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
@while
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
6、函数
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
less
1、变量 @ 1）（选择器名称，属性名称，URL和@import等都可以使用@{my-selector}） 2） 延迟加载 （不必在使用前声明）
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}#header {
color: @nice-blue;
}
属性中使用
.widget {
@{property}: #0ee;
background-@{property}: #999;
@property: color;
}
结果
.widget {
color: #0ee;
background-@{property}: #999;
}
2、Mixins
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;}
#menu a {
color: #111;
.bordered;
}
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
3、嵌套 1）引用父选择器 &
#header {
color: black;
&.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
&多级套用
.grand {
.parent {
& > & {
color: red;
}
}
}
结果
.grand .parent > .grand .parent {
color: red;
}
4、计算
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%
5、函数
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
.average(16px, 50px); // "call" the mixin
padding: @average; // use its "return" value
}
结果div {
padding: 33px;
}
网友评论