// create on 7.30.2018
/*
SASS提供四个编译风格的选项：
* nested： 嵌套缩进的css代码，它是默认值。
* expanded： 没有缩进的、扩展的css代码。
* compact： 简洁格式的css代码。(一行)
* compressed： 压缩后的css代码。
命令行：
sass --style compressed sign.scss sign.css
*/
/* 三、基本用法 */
/* 3.1 变量 */
/* sass允许使用变量，所有变量以$开头 */
$color : red;
$fontSize : 14px;
body {
font-size : $fontSize*2;
color : $color;
div {
font-size : $color;
background : $color;
input {
font-size : $fontSize;
color : $color;
}
}
}
body, input, button {
font-family : Arial, "Microsoft YaHei", sans-serif;
}
$axax : 16px;
$side : left;
$var : 100px;
$main_color : #f60;
/* 如果变量需要镶嵌在字符串之中，就必须需要写在 # {}之中 */
body {
font-size : $axax;
color : blue;
border : 1px solid currentColor;
border-top : 1em;
div {
color : inherit;
border-top : 1em;
input {
border-#{$side} : $axax;
}
.main {
right : $var*0.1; /* 3.2 计算功能 */
width : (28px/2);
height : 50px+30px;
div {
border : 1px solid $main_color;
border : {
color : red; /* 3.3 嵌套： 1.选择器嵌套，2.属性嵌套 例：border-color */
};
a {
&:hover { /* 在嵌套的代码块内，可以使用&引用父元素。 如：a:hover伪类 */
font-size : 14px;
background : $main_color;
}
}
}
}
}
}
/* 3.4 注释 */
/* file creat by Threeki 这种注释 compressed(压缩)编译后 被移除，普通编译方式仍然保留 */
/*! in 7.28.2018 !重要注释 不管何种编译方式，都会被保留 */
// 这是注释测试 这种注释方式 仅保留在sass文件中
/* 四、代码的重用 */
/* 4.1 继承 */
/* sass允许一个选择器，继承另一个选择器 */
.class1{
border: 1px solid #ddd;
}
/* 现在class2要继承class1，就要使用 @extend命令 */
.class2{
@extend .class1;
font-size: 120%;
}
/* 4.2 自动添加前缀的 @mixin指令 */
@mixin prefixer( $property, $value, $prefixes : webkit moz o ms) {
#{$property} : $value;
@each $prefix in $prefixes {
@if $prefix == webkit {
-webkit-#{$property} : #{$value};
}
@else if $prefix == moz {
-moz-#{$property} : #{$value};
}
@else if $prefix == o {
-o-#{$property} : #{$value};
}
@else if $prefix == ms {
-ms-#{$property} : #{$value};
}
}
}
// 首先遍历参数 $prefixes ，依次输出参数里面包含的前缀名，接着使用插值语句 # {}输出包含浏览器前缀的属性名加属性值，
// 这就输出了一个完整的包含浏览器前缀的样式了，最后输出不带前缀的标准写法。
// 值得注意的是，在 @mixin 指令中给参数 $prefixes设置了默认值 “ webkit moz ”，这样，当我们没有输入第三个参数的时候，
// 就默认输出输出webkit前缀，moz前缀和不带前缀的标准的写法。
// 主要的需要添加浏览器引擎前缀的属性
// 过渡属性(transition-property, transition-duration, transition-timing-function, transition-delay)
// 动画属性 (animation-name, animation-duration, animation-timing-function, animation-delay)
// border-radius
// box-shadow
// backface-visibility
// column属性
// flex属性
// perspective属性
// 当然这只是部分而已，还有其他一些CSS3属性需要加浏览器前缀。
/* 使用 @include命令，调用这个mixin */
#main {
@include prefixer(border-radius, 10px);
}
#idid {
font-size : 23px;
color : red;
border : currentColor;
background : red;
@include prefixer( display, flex);
}
/*
命令行:
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch input-dir:output-dir
*/
/* 4.3 颜色函数 */
/* sass提供了一些内置的颜色函数，以便生成系列颜色 */
p{
color: lighten(#cc3, 10%); // #d6d65c
color: darken(#cc3, 10%); // #a3a329
color: grayscale(#cc3); // #808080
color: complement(#cc3); // #33c
}
/* 4.4 插入文件 */
/* @import命令，用来插入外部文件 */
// @import "path/filename.scss";
@import "foo.css";
/* 五、高级语法 */
/* 5.1 条件语句 */
p{
@if 1 + 1 == 2 { border: 1px solid;}
@if 5 < 3 { border: 2px dotted;}
}
@if lightness($color) > 30% {
.P{background-color: #000};
} @else {
.P{background-color: #fff};
}
/* 5.2 循环语句 */
/* for循环 */
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
/* while循环 */
$i: 6;
@while $i > 0{
.item-#{$i} { width: 2rem * $i }
$i: $i - 2;
}
/* each命令 作用与for类似 */
@each $member in a,b,c,d {
.#{$member} {
background-image: url("/image/#{menber}.jpg");
}
}
/* 5.3 自定义函数 */
@function double($n){
@return $n * 2;
}
#sidebar {
width: double(5px);
}
// 教程来源：http://www.ruanyifeng.com/blog/2012/06/sass.html
网友评论