// https://www.sass.hk/guide/
// Sass是基于Ruby的，是在服务器端处理的。
/*!
@author：xuping，即使是压缩模式的的编译，也会保留这行注释
*/
/*
comment:会保留到编译后的文件。
*/
// comment，只保留在SASS源文件中，编译后被省略。
// 变量以$开头
$blue : #1875e7;
div {
color : $blue;
}
// 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
// 计算功能
body {
margin:(14px/2);
top: 50px + 100px;
}
// 嵌套、伪类
// p {
// color: #dddddd;
// h1 {
// color: #333;
// }
// }
// a {
// &:hover { color: #ffb3ff; }
// }
/*
* 代码的重用
*/
// class2要继承class1，就要使用@extend命令：
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
// Mixin 可以重用的代码块。参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-left:10px;
}
div {
@include left(20px);
}
// 颜色函数
/*
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
*/
.color{
color:lighten(#cc3, 10%) // #d6d65c
}
// 插入文件
@import "foo.css";
/*
* IF for while each 自定义函数
*/
p {
@if 5 < 3 { border: 2px dotted; }
}
// if/else
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
// while
$i:6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
}
// for
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
// function
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
// https://less.bootcss.com/
// 注释，不会被编译
/*
这也是less中的注释，但是会被编译
Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。
*/
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
// 计算功能
.color{
background-color:#112244 + #111; // 结果是 #223355
}
// 嵌套
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
/*
代码复用
*/
// 继承
.parentClass{
color:red;
}
.subClassOne{
&:extend(.parentClass);
}
.subClassTwo:extend(.parentClass){
}
// Mixin
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered();
}
// 颜色函数，内置函数
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
// 映射
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
// 遍历循环
.loop(@i) when (@i < length(@bgcardList)+1){
.backgroundcard(extract(@bgcardList, @i),extract(@bgcardList, @i));
.loop(@i+1);
}
.loop(1);
// if 条件
@dr: if(@my-option = true, {
button {
color: white;
}
a {
color: blue;
}
});
@dr();