sass-转型移动端的一些前期准备笔记

本文链接：https://blog.csdn.net/o_xiaopingguo/article/details/88660685

sass

SASS教程文档
(1)变量声明与引用
变量可以存在的两个位置：类似于作用域

$nav-color: #F90;//第一个位置
nav {
  $width: 100px;//第二个位置“{ }”内，注意：当变量定义在css规则块内，那么该变量只能在此规则块内使用
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

(2)嵌套css规则
后代选择器嵌套：

后台选择器的嵌套有两种情况：
但是sass是用了同一个规则来解读的，都是从最外层的父元素一层层找子元素用空格来连接起来来编译。
一种是父级中不带有单独的属性：
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
另一种是父级中既带有属性，又带有子元素：
#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
}

父选择器嵌套

有时候需要一个父级元素设置规则，又要同时为了父级元素的伪类设置规则，即:hover,:link等.
若此时用后代选择器嵌套的规则来写就不是正确的。如：
#content a {
	color:blue；
	:hover{
		color：red;
	}
}
按着sass对后台选择器的嵌套的规则来解读，就是：
#content a{color:blue}
#content a :hover{color:red;}
这样明显是不对的，因为后台选择器的嵌套是以空格来连接的。
因此sass设定了一个“&”符号，来代替父元素，用法如下
#content a {
	color:blue；
	&:hover{
		color：red;
	}
}

层级选择器嵌套

对于层级选择器嵌套如：
#content p,#content a,#content h2{color:#000;}
sass的规则可以写成如下：
#content {
	p，a,h2{
		color:#000;
	}
}
或者：
#content ，#container{
	a{color:blue;}
}

“+” “>” "p"选择器嵌套

可以把这些选择器放在最外层选择器的后面，或者内层选择器的前面，如下：
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

嵌套属性

嵌套属性的规则是这样的：
把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。
就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，
最后生成的效果与你手动一遍遍写的css样式一样：
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
编译成
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
再或者缩写的形式：
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
编译成：
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

(3)混合器
如果需要大段的样式的重复则需要想到混合器。混合器是一组属性的组合
通过@mixin来定义，通过@include来引用。
原理：引用的时候会把混合器里面的样式（属性：属性值）都复制放到调用@include的命令的地方。
混合器里面可以包含两种内容如下：

//**第一：可以包含一组属性**
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最终生成：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
//**第二：可以包含css规则，可以放上面所有的所有的sass的规则**
@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
ul.plain {
  color: #444;
  @include no-bullets;
}

sass的@include指令会将引入混合器的那行代码替换成混合器里边的内容。最终，上边的例子如下代码:

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

混合器传参
混合器中传参有两种情况，一种有默认值，一种没有默认值

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

当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：

a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
=====================================================
第二种：默认值可以是key：value的形式，也可以是变量的形式
@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

如果像下边这样调用：@include link-colors(red) $hover和$visited也会被自动赋值为red。

(4)选择器继承
首先继承是继承的选择器。选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式（关于另一个选择器的所有样式），也可以这样理解，因为继承的是选择器，而不是属性。

//.seriousError从.error继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到h1.seriousError
  font-size: 1.2rem;
}
=======================================
.seriousError {
  @extend .error;
  border-width: 3px;
}

原理：如果.seriousError @extend .error，那么样式表中的任何一处.error都用.error.seriousError这一选择器组进行替换。这就意味着相关样式会如预期那样应用到.error和.seriousError。当.error出现在复杂的选择器中，比如说h1.error.error a或者#main .sidebar input.error[type=“text”]，那情况就变得复杂多了，但是不用担心，sass已经为你考虑到了这些。
关于@extend有两个要点你应该知道。

[1 ] 跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。

[2 ] 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

=======================================================================================
通常使用继承会让你的css美观、整洁。因为继承只会在生成css时复制选择器，而不会复制大段的css属性。但是如果你不小心，可能会让生成的css中包含大量的选择器复制。

避免这种情况出现的最好方法就是不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则。如果你这么做，同时被继承的css规则有通过后代选择器修饰的样式，生成css中的选择器的数量很快就会失控。
注意：值得一提的是，只要你想，你完全可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长，但有一个前提就是，不要用后代选择器去继承。

混合器在某些方面跟css类很像。都是让你给一大段样式命名，所以在选择使用哪个的时候可能会产生疑惑。最重要的区别就是类名是在html文件中应用的，而混合器是在样式表中应用的。这就意味着类名具有语义化含义，而不仅仅是一种展示性的描述：用来描述html元素的含义而不是html元素的外观。而另一方面，混合器是展示性的描述，用来描述一条css规则应用之后会产生怎样的效果。

混合器和选择器继承的区别：
混合器主要用于展示性样式的重用，而类名用于语义化样式的重用