todaylg

Sass基础

2017-08-11 todaylg基础备忘

Sass基础

Sass也好Less也好,总还是要学习一个的,虽然自己平时整的小东西可能还是直接用CSS还更简单,但是要是项目大了以及要考虑便于维护的情况下,那还是得用这两的啦。

变量

Sass用$符来标识变量(‘$’向来是兵家必争之地啊2333),Sass中的变量值可以是任何CSS中的标准属性值(什么#FFF、solid、100px等等),值与变量名之间用’:‘冒号分隔,作用域则类似使用let声明(块之外定义即相当于全局变量) ,变量也可以引用其他变量,且变量可以和CSS的属性名或选择器名称相同,变量名相同后者覆盖前者,可以使用尾缀!default设定默认值,使用!important在局部声明全局变量 :

$testColor: red;    //全局
.test {
    $width: 100px;    //局部
    width: $width;
    color: $testColor;
}

//即相当于:

.test {
  width: 100px;
  color: red;
}

嵌套

这个比较实用啊:

$testColor: red;    
.test {
  p {color:$testColor}
  color: $testColor;
}

//即相当于:

.test {
  color: red;
}
.test p{
  color: red;
}

当然还支持嵌套嵌嵌套,嵌套的同级还可以写当级的普通CSS样式,非常好使。但是有些情况这招就不好使了:比如:

$testColor: red;    
.test a{
  :hover {color: green}
  color: $testColor;
}

这时候是希望在.test后的a链接添上hover伪类,但是这么写就变成了a标签之后的所有子元素填上伪类了。要是普通的css我们这时候其实只要写:.test a:hover就完事了,但是这样就还得重复的多写一遍.test a{…},所以这时候就得用&符号了,这个符号表示父选择器(虽然叫父级选择器,但是其实就是代表当前层级的选择器):

$test: red;
.test a{
  color:$test;
  &:hover{color:blue};
}

//就相当于
$test: red;
.test a{
  color:$test;
}
.test a:hover{
  color:blue;
}

但是& 必须出现在的选择器的开头位置(作为选择器的第一个字符),可以跟随后缀(因为编译时遇到&会直接替换)。

嵌套特性还可以结合群组选择器(子级选择器和同级选择器也是一样的)减少重复的代码:

.test #p1,.test #p2,.test #p3 {color:blue}

//就可以这么写:
.test {
    #p1,#p2,#p3 {color:blue}
}
    对于CSS的属性也可以缩写从而减少代码量:
.test {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

//相当于:

.test {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

@import

这个@import之前我都没见到用到过。。。可以在执行到@import时导入其他的CSS,Sass进行了优化,在编译的时候就把需要导入的文件导入打包,并且可以省略尾缀来导入,但是导入后不会全局有效(.css=>.scss)。

注释

Sass支持CSS标准的//注释和//,但是默认情况下后者在打包的时候不会出现在生成的CSS文件中。

混合器

混合器使用@mixin标识符定义,通过@include来使用,便于处理重复的统一样式:

$test: red;
@mixin test{    //名称
  color:$test;
  &:hover{color:blue};
}
.test a{
  @include test;
}

混合器不仅可以包含普通属性,也可以包含CSS的各种选择器,结合&更是强的不行,是不是有种像函数的错觉?还没完,还可以传参!用@include调用的时候可以穿参数,这不就是function嘛- -:

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}
//或者指定传参数值:
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}


//Sass最终生成的是:

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

//类似ES6,还可以在定义参数的时设定默认值
@mixin link-colors(
    $normal,
    $hover: $normal,//默认就为$normal的值
    $visited: $normal//这样即使只传一个参数也可以
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

选择器继承

选择器继承即一个选择器可以继承另一个选择器下定义的所有样式。

.error {
  border: 1px red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;//继承
  border-width: 3px;
}

//就相当于:
.seriousError {
  border: 1px red;
  background-color: #fdd;
  border-width: 3px;
}

挺好用的对吧,麻烦的还没说呢:@extend .error后任何和.error有关的组合选择器也会被.seriousErro以组合选择器的形式继承,也就是拖家带口的全和你扯上关系了:

.error a{  //也会应用到.seriousError a    
  color: red;
}
h1.error { //同样也会应用到hl.seriousError
  color: red;
}

所以这个继承可不能随便乱用,并且几乎所有的CSS规则都可以继承和被继承,且当继承一个复杂的选择器的时候继承的情况会乱七八糟。总的来讲,如果不出现在复杂的选择器里的话(情况会变复杂),选择器继承就相当于把样式表的任何一处.error都用.error .seriousError替换。

循环

比如可以省掉一个个资源import:

@for $i from 0 through 29 {
  &.testIcon#{$i} {
    background: url(~xxxx_#{$i}.png) no-repeat center;
    background-size: 100% auto;
  }
}

CSS常见问题集合

丢了CSS一段时间后突然拿起来用发现一下懵圈了。。。一些原来很基本的问题都忘完了。。把遇到的问题记一下,捡一捡吧。。

层级问题

相关:层级z-index

图片文字垂直居中

相关:这里

多行文本与单行文本垂直居中