@charset "utf-8";
//中文注释
//1、变量(变量分为局部变量和全局变量)
//位置也需要注意，不能放在使用这个变量之后
//
$highlight-color:#fff;
// 全局变量
//嵌套(避免重复输入父选择器)
//分为选择器嵌套，属性嵌套
#index{
a{ background-color: $highlight-color; }
h1{ background-color: $highlight-color; }
}
//父选择器&符号($符号可以指代父选择器)
a{
background-color: $highlight-color;
&:hover{ color:#fff; }
}
// &必须作为第一个字符，可以随后缀生成复合选择器
#index {
&-banner{
width:100%;
}
}
//属性嵌套
.index{
font:20px/24px{
weight:bold;
}
}
// 局部变量只能在嵌套规则内使用,要想把局部变量变成全局变量
// !global
//
// !default(如果变量后面加上这个声明，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值)
div{
background-color:$highlight-color;
}
.index-p{
$width:100px !global;
width:$width;
}
.index-sart{
width: $width;
}
$content:"first content";
$content:" second content"!default;
$new-content:"first time"!default;
#mian{
content:$content;
new-content:$new-content;
}
// sass支持运算符
.index-sum{
margin-left:5px+8px/2px;
}
// 要是不做除法运算,用#{}包着变量或值即可
p{
$font-size: 12px;
$line-height:30px;
font:#{$font-size}/#{$line-height};
}
//颜色值的alpha可以通过opacify函数和transparentize函数进行调整
.pcolor{
color:opacify($highlight-color,.4);
}
//字符串运算 +可以用于字符串连接
// 插入值语句( 父级用&，其他用#{} )
$name:foo;
$attr:border;
p.#{ $name }{
#{ $attr }-color:blue;
}
//@import允许其导入scss或sass文件。被导入的文件将合并编译到同一个css文件中，
//被导入的文件所包含的变量或者混合指令都可以在导入的文件中使用。
//
//允许导入多个文件
//@import "","";
//
//@import也可以在嵌套中使用，这样导入的样式只能在嵌套层中使用，但是不可以在混合指令或
//控制指令中嵌套
//
//@media
//
//@media嵌套，将会编译到文件的最外层，包含嵌套的父选择器
.sidebar{
width:200px;
@media screen and (orientation:landscape){
width:220px;
}
}
// @extend 一个元素使用的样式与另外一个元素完全相同，但是又添加了额外的样式。
// 就可以用这个声明来继承
.error{
border:1px #f00;
}
.seriousError{
@extend .error;
border-width: 4px;
}
//@extend 的几大属性
//
//会继承父级属性
// 特殊情况，在@media中的使用，被继承类必须在@media块中
// 设置打印机用字体尺寸(@media print)
@media print {
.error1{
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error1;
border-width: 3px;
}
}
//@at-root 在嵌套中使用，里面的元素可以不继承父节点
.parent{
.one{ padding: 10px;}
@at-root{
.two{
margin:30px;
}
}
}
//在@media中使用也同样如此，可以不在媒体查询的范围
//某个类的某些属性
@media print{
.page{
border-width: 2px;
@at-root(without: media){
border-radius: 4px;
}
}
}
//@debug和@warn 还有%占位符感觉并没有什么用
//
//控制指令
//@if 如果条件成立时，输出{}的代码
$type:monster;
p{
@if $type==ocean{
color:blue;
}@else if $type == matador{
color:red;
}@else if $type == monster{
color:green;
}
}
// @for
//
@for $i from 1 through 3{
.item-#{$i}{ width:2em * $i; }
}
//@each 循环列表(一个变量的情况)
@each $animal in puma,sea-slug,egret,salsmandr{
.#{ $animal }-icon{
background-image: url("/images/#{$animal}.png");
}
}
// @each 两个变量的情况
@each $header,$size in (h1:1em,h2:1.5em,h3:2em){
#{$header}{
font-size: $size;
}
}
// @while 重复输出格式直到表达式返回结果为false
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
//混合指令（和继承有点相似呀）
//
//定义混合指令与引用混合指令
//
////混合样式中也可以包含其他的混合样式
@mixin text{
border:1px solid #dedede;
}
@mixin large-text{
@include text;
font:{
size:20px;
}
color:#ff0000;
}
.page-title{
@include large-text;
padding:4px;
}
//混合指令可以传参数
//
@mixin sexy-border($color,$width:2in){
border:{
color:$color;
width:$width;
}
}
p{ @include sexy-border(blue); }
//混合指令可以给参数设置默认值，当这个指令被引用时，如果没有给参数
//则自动使用默认值
//
//
//混合指令不确定参数,变量加点点点
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
//还有另外一种写法
@mixin colors($text, $background, $border) {
color: $text;
background-color: $background;
border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
@include colors($values...);
}
//函数指令 可以返回一个计算后的数值
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
随时随地看视频
