Sass学习 整理

/*!
©CopyRight
*/
//*********注释*********
//SASS共有两种注释风格。
//标准的CSS注释 /* comment */ ，会保留到编译后的文件。
//单行注释 // comment，只保留在SASS源文件中，编译后被省略。
//在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

//*********数据类型*********
//numbers (e.g. 1.2, 13, 10px)
//strings of text, with and without quotes (e.g. "foo", 'bar', baz)
//colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
//booleans (e.g. true, false)
//nulls (e.g. null)
//lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
//maps from one value to another (e.g. (key1: value1, key2: value2))

//*********变量*********
//简单变量定义，使用
$blue : #1875e7;

div {
color : $blue;
}
//如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
//默认值 !default
//假设变量申明带有!default，那么如果在此申明之前没有这个变量的申明，则用这个值，反之如果之前有申明，则用申明的值。
$color:red;
$color:blue !default;
p{
color:$color;//red
}
//多个变量一起申明
//把多个相关的值写在一个变量里，然后通过nth($var,index)来获取第几个值
$linkColor: red blue !default;

a{
color:nth($linkColor,1);

&:hover{
color:nth($linkColor,2);
}
}
//全局变量 !global
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}

//*********计算*********
$var : 20;
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
//*********嵌套*********

/* 下面的代码，等同于：
div h1 {
　　　　color : red;
　　}
*/
div {
hi {
color:red;
}
}
//border-color
p {
border: {
color: red;
}
}
//在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成
a {
&:hover { color: #ffb3ff; }
}
//跳出嵌套：@at-root
//默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器
//默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。
//这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support）。我们默认的@at-root其实就是@at-root (without:rule)。

//跳出父级元素嵌套
@media print {
.parent1{
color:#f00;
@at-root .child1 {
width:200px;
}
}
}

//跳出media嵌套，父级有效
@media print {
.parent2{
color:#f00;

@at-root (without: media) {
.child2 {
width:200px;
} 
}
}
}

//跳出media和父级
@media print {
.parent3{
color:#f00;

@at-root (without: all) {
.child3 {
width:200px;
} 
}
}
}
//@at-root与&配合使用
.child{
@at-root .parent &{
color:#f00;
}
}

//*********继承 继承要使用@extend命令*********
//使用SASS继承时有一个规则:
//通过@extend引用的类名，你要有绝对的自信，它从未用在几个地方。
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
//强大的%placeholders
//%为占位符，名称自定义
%placeholders {background-color: #fff;}
selector {
@extend %placeholders;
}

//*********重用*********
//使用@mixin命令，定义一个代码块
//使用@include命令，调用这个mixin
//Mixins的黄金规则是将相似的风格定义在一个@mixin中。
//请注意这里的一个关键词相似的，另外Mixins主要是用于重用，而不是用来指定具体的属性值。
//指定具体的属性值 可以用继承
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
//mixin的强大之处，在于可以指定参数和缺省值
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
//使用的时候，根据需要加入参数
div {
@include left(20px);
}
//多组值参数mixin
//如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...
//box-shadow可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}
.box{
border:1px solid #ccc;
@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
//@content
//它可以使@mixin接受一整块样式，接受的样式从@content开始
//sass style 
@mixin max-screen($res){
@media only screen and ( max-width: $res )
{
@content;
}
}
@include max-screen(480px) {
body { color: red }
}
//css style
@media only screen and (max-width: 480px) {
body { color: red }
}

//下面是一个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); }

//*********颜色函数************
div {
color : lighten(#cc3, 10%); // #d6d65c
color : darken(#cc3, 10%); // #d6d65c
color : grayscale(#cc3); // #d6d65c
color : complement(#cc3); // #d6d65c
}

//*********插入文件*********
//@import命令，用来插入外部文件
@import "_test2.scss";

//*********条件语句*********
//@if
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
// @if @else
$color : #1875e7;
p {
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
}

//*********循环*********
//@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");
}
}

//*********自定义函数*********
//@function与@mixin，%这两者的第一点不同在于sass本身就有一些内置的函数，方便我们调用，如强大的color函数；
//其次就是它返回的是一个值，而不是一段css样式代码什么的。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}


//延伸
//@mixin通过@include调用后解析出来的样式是以拷贝形式存在的
//@mixin需要@include来调用，而.class和%placeholders需要@extend来调用
//@include主要是用来调用@mixin定义的函数模块。在@mixin中可以定义一个相似功能样式，而且可以设置变量、定义参数和默认参数值；
//@extend主要是用来调用.class或者%placeholders定义的属性模块；在.class或者%placeholders中可以定义一个相同样式，但这里面不能定义参数；
//@include每次调用相同的@mixin时，编译出来的CSS相同样式不会进行合并；
//@extend每次调用相同的 .class时，如果.class在样式出现多次，那么编译出来的CSS有可能不是您需要的样式；
//@extend每次调用相同的%placeholders时，编译出来的CSS相同样式会进行合并。
//%placeholders就类似于CSS中的.classes或者#ids，只不过使用%代替了.和#。但%placeholders中的代码只有通过 @extend调用之后才会产生代码量，不然他是不会产生任何代码量。
//不要使用没有设置参数的@mixin，他们应该是.class或者%placeholders;
//不要轻意（从不使用）@extend调用.class。会得到你意想不到的结果，特别是定义的.class出现在嵌套或其他的样式表中，你应该使用@extend调用%placeholders;
// 不要使用太深的选择器嵌套。
//如果你能避免，不要使用标签名。这不是一个taxative规则，但比id或者类名的性能要更低；
//不要使用子选择器符号>，在SASS中很无效；
//不要使用同史选择器+，配合你当前的标记他是非常无效。
//不要太相信SASS的自动编译，你应该时时检查生成的CSS。在SASS中纠错能力比较差；

附件：https://files.cnblogs.com/files/bocoimg/sass.rar

附件是Sass代码示例，包含了Sass常用的注释、变量、计算、循环、嵌套、继承、函数等方面的内容，可以参考一下。

    文件说明：

            _test.scss：Sass代码示例

            _test2.scss：仅为演示Import的空文件

                

            test.css：编译_test.scss后的样式文件

 

    ps：编译相关：

        编译命令：sass _test.scss test.css

SASS提供四个编译风格的选项：

　　* nested：嵌套缩进的css代码，它是默认值。

　　* expanded：没有缩进的、扩展的css代码。

　　* compact：简洁格式的css代码。

　　* compressed：压缩后的css代码。

生产环境当中，一般使用最后一个选项。

　　sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

　　// watch a file

　　sass --watch input.scss:output.css

　　// watch a directory

　　sass --watch app/sass:public/stylesheets

sass中文编译：设置环境变量：RUBYOPT=-KU。否则不支持中文,编译会报错