2018-09-01

sass用法总结和思考

media pc mobile ipad

mobile pc ipad

mobile: @media screen and(max-width:700px) and(max-aspect-ratio:1/1.6)

pc: @media screen and(max-width:700px) and(min-aspect-ratio:16/9)

ipad: @media only screen and(max-width:1000px) and(min-aspect-ratio:1/1.3) and (max-aspect-ratio:17/9)

#container {
p , a {
编译: container p 。 container a
}

& : hover { //&是根那个选择器 #container 实际上就是根选择器的全名称

}

&-asd {
  编译: #container-asd
  用途: 组件名称-具体工具名称
}

<h3 a="asda">style简写</h3>
margin {
  top:
  right:
  bottom:
  left:
  用途:
  ①margin直接设置的话，是会根据值的个数不同而不同的，3值2会作为left right ，2值1 top bottom 2 left right
  ②其他各种font-family font-size 
}


/*这
 *注释
 *不会
  被放进编译好的css中*/
//但是这个会
$version: "1.2.3";
/* 版本 #{$version}插值语句同样适用*/

$width: 5em;  //块级变量
<h3 a='mpimbg'>golbal</h3>
.inner {
  $height: 4em !global;
  //任何地方都能使用了
  width: $width;

}

.another {
  height: $height;
  用途: 我能想到的就是覆盖了
}



//#{} 引号字符串将被弄成无引号字符串 方便mixin中引用选择器名

p {
  font: 10px/8px
  编译: font: 10px/8px
  用途: 这部分感觉有点乱 到底是除法还是css分隔数字？1.如果值或值的一部分是变量或者函数的返回值
  2.如果值被圆括号包裹
  3.如果值是算术表达式的一部分 1px + 2px /2px   或者 8px / 2 
  当你的值是变量，但是又不想被当作除法处理的时候 #{$value} / #{$another}
  color: #050709 * 2 ;
  编译: 05 *2 + 07 *2 + 09 *2;
  color: rgba(1,2,3,0.5) +rgba(3,5,9,0.1)
  编译: 1+3,2+5,3+9,0.5+0.1
  $color-red: rgba(255, 0, 0, 0.3)
  color:opacify(  $color-red, 0.1  ) 
  编译: color: rgba(255, 0, 0, 0.4)
  color: transparentize (   $color-red, 0.1  )
  编译: color: rgba(255, 0, 0, 0.1)
}

<h3 a='mpimbgzz'>字符串算法</h3>
.my-div {
  display: g + rid;
  编译display: grid;
  //注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
  //总的来说是 谁在最左边谁用自身来决定返回的是有引号还是无引号
  //什么时候需要有引号？  content: '这样就需要引号了' 
}

$name_z: class-name
.#{$name_z}{
  编译: .class-name{}
}

$content: null;
$content: "Non-null content" !default;

.z {
  content: $content ;
  编译： Non-null content
}

<h3 a='mpimbgzzaa'>默认import</h3>
//Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
@import 'zz.css' //导入zz.css
@import 'zz'  //尝试寻找sass 或者 scss 但是不会是css
@import 'a' , 'b'  //允许导入多个文件 这是css不支持的
$family: unquote('zz')
@import url('http://fonts.googleapis.com/css?family=\#{$family}')
//这里说一下unquote，是用来把引号变成无引号的 所以会编译成\#zz 
//@import 可以用于很多位置 但是会为其嵌套
//不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

.example {
  color: red;
}

#main {
  @import 'example'
}
对应的scss为：
 #main {
   .example {
     color: red;
   }
 }

}

extend 占位符

现在假设组件A 和组件B 部分样式不一样

#main %exterme {

}

#A {
@extend %exterme; //#main #A //#A取代%exterme
selfcss ;
}

#B {
@extend %exterme;
selfcss ;
}

可为什么用@extend而不是直接在外层套进去呢？因为这样拓展性更高，假设你专门弄一套scss是%extend的，那么其他不在同一套体系的，可以直接extend来拓展。
你是在外层套进去的话，就不能组织管理%extend起来了，其不在同一套scss的，也难以拓展。

extend .类

.a {
width:10px;
}

.a.ccc {
color: red;
}

这里叫多类选择器，不懂请百度下

.b {
@extend .a; //这里继承.a的东西就是直接把 .b 添加进.a
height:6px;
}

//编译后 .a , .b{ } .a.ccc{} .b.ccc{}

注意不是直接把.a里面的内容填进去而是.a , .b。
任何其他使用到.a的样式也会同样继承给.b ，这里请好好理解下extend的作用，这意味着拓展一切相关的东西(你也
可以理解为编译出一套新的把.a的名称改成.b 的css样式)

当合并选择器时，@extend 会很聪明地避免无谓的重复，.seriousError.seriousError 将编译为 .seriousError，不能匹配任何元素的选择器（比如 #main#footer ）也会删除。

sass 可以extend任何单个元素的选择器 :hover伪类 ::after伪元素 .a.ccc 多类选择器 a[a ^=”https://“]
来复习一波熟悉选择器
还可以多重延伸，就是可以@extend .a , .b 等于 @extend .a ; @extend .b;

.foo .bar {

}
.a {
@extend .foo .bar
}

这是不允许的，因为不是单个元素的选择器！这是基于单个元素的选择器！看上面的举例。
1
2
3
4
5
6
7
8
9
<h3 a=‘mol’>!optional</h3>
h1.c{
  color: red;
}
a.text {
  @extend .c;
  background-color: pink;
}
现在修改为
a.text {
@extend .c !optional;
}
编译：
h1.c{
color: red;
}
a.text {
background-color: pink;
}
造成这样的一个原因是 h1与a是有冲突的添加!optional 是为了解决冲突如果遇到这种情况那么不生成，等同于@extend c; 在这个样式中失败。
@media screen and() {
.a {}
}
.c {
@extend .a;
}
这样子是不允许的，在@media中使用@extend 你只能在@media里面选取
原文：

在指令中使用 @extend 时（比如在 @media 中）有一些限制：Sass 不可以将 @media 层外的 CSS 规则延伸给指令层内的 CSS，这样会生成大量的无用代码。也就是说，如果在 @media （或者其他 CSS 指令）中使用 @extend，必须延伸给相同指令层中的选择器。

分音_

当你想混合scss的时候你使用@import ‘a.scss’
假如你不想sass去编译你的a为a.css
那么你可以修改文件名为 _a.scss
注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

@media嵌套

@media 和css用法一样，但是sass允许被嵌套
允许使用插值#{} 变量函数 @media #{$media} and ($feature: $value)
.main {
width: 100px;
@media screen and (max-width:300px) {
width: 600px;
color: red;
}
}

编译：//把@media被嵌套的父选择器来嵌套@media所写的规则
.main {
width: 100px;
}
@media screen and (max-width: 300px) {
.main {
width: 600px;
color: red;
}
}

这样的做法更方便于选取父选择器，这里要注意的是父选择器是css编译完成后的父选择器

@at-root

.parent {
color: red;
@at-root .child{
font-size:1em;
}
}
编译：
.parent {
color: red; }
.child {
font-size: 1em; }

.parent {
color: red;
@at-root {
.child { font-size:1em; }
.sec { background-color: red; }
}
}
编译：
.parent {
color: red; }
.child {
font-size: 1em; }
.sec {
background-color: red; }

@at-root 指令，编译到根，摆脱父选择器的影响

@media print{
.parent {
color: red;
@at-root .child{
background-color: red;
}
}
}
编译：
@media print {
.parent {
color: red; }
.child {
background-color: red; } }

@at-root是用来摆脱选择器的，但并摆脱不了@media 假如你想摆脱@media 那么@at-root (without:media)

出一道关于@media的题给你吧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<h3 a=‘zltynyin’>@at-root (without: media support 指令)</h3>
@media screen and(max-width:100px) {
  @support (display:grid){
  
    .GG{
    
      font-szie: 50px;
      @media (min-width:50px){
      
        .parent {
          color: red;
          @at-root (without: media support) .child{
            background-color: red;
          }
        }
      }
    }
  } 
}

答案：
@media screen and (max-width: 100px) {
  @support (display:grid) {
    .GG {
      font-szie: 50px; }
      @media (min-width: 50px) {
        .GG .parent {
          color: red; } } } }

.child {
  background-color: red; }
你还可以去去除其他指令例如@support ，你还可以without: all 摆脱一切指令。

@debug 指令用于输出表达式的值
such as: @debug 1px + 2px
@warn 用于输出警告

@if

p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
@if 后面可以跟@else if

for

语法格式： @for $var from through
@for $i from 1 through 3 {
.item-#{$i} { } //包含start 和 end
}

语法格式： @for $var from to
@for $i from 1 through 3 {
.item-#{$i} { } //包含start 但是不包含end
}
语法格式： @each $var in
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url(‘/images/#{$animal}.png’);
}
}
编译：
.puma-icon {
background-image: url(‘/images/puma.png’); }
.sea-slug-icon {
background-image: url(‘/images/sea-slug.png’); }
.egret-icon {
background-image: url(‘/images/egret.png’); }
.salamander-icon {
background-image: url(‘/images/salamander.png’); }

用途：类似于 for let {null,value}in 循环输出value

数组

puma, sea-slug, egret, salamander 这是数组
还有一种数组是 ( A B C D E F G)

高级用法 @each $A $B $C in (xzx,zxz,xzxz),(zx,zxz,xza),(zxzxm,xzxz,zxzxz)
例子：
@each $animal, $color, $cursor in (puma, black, default),
(sea-slug, blue, pointer),
(egret, white, move) {
.#{$animal}-icon {
background-image: url(‘/images/#{$animal}.png’);
border: 2px solid $color;
cursor: $cursor;
}
}
js里面的剧名匹配法:
@each $A $B in(1:10px,2:20px,3:30px ){
h#{$A} {
font-size: $B;
}
}

while
$i: 6;
@while $i > 0{ //6次

$i: $i +1;
}

Mixin 与include

用来定于可重复使用的样式
@mixin 名称{
cssstyle: 1;
//可以引用父选择器
&:hover{

}
}
.style {
@include: 名称;
}

当然你在最外层使用@include 名称也可以。就当全局了。
疑问：名称支持 #{$var}吗？
1
2
3
4
5
6
7
8
9
$var: haha;

@mixin #{$var}{
  a{
    color: red;
  }
}

@include haha ;
报错，我也不知道为嘛不允许。

参数模式mixin

@mixin asd($a, $b: 5) { //有默认值功能
font-#{$a}: $b + px;
}
p{
@include asd($a:’size’, 10); //你传size也行，我里面已经帮你转换了#{$a} 。
//$a是关键词参数方便看也方便默认值的空缺
}

默认值空缺：
@mixin asd($a: 10, $b: 10){
font-size: #{$b};

}

p{
@include asd($b: 20px);
}
这预示着可以打乱顺序了

哇，这厉害了，这也有。
就是不确认参数有多少个的时候
@mixin name ($arguments…){
margin: $arguments ;//这是第一个
padding: $arguments ;//这是第二个
}
p{
@include name ( $width: 1px,2px,3px,4px ,5px, 6px, 7px, 8px ) //你可以传入关键词！！！这里警告下把$width删除吧。
}

不要传入关键词，我现在还不理解传关键词的目的和作用，传进去了直接报错Error: ordinal arguments must precede named arguments
，而且按照语义解释 name怎么才利用到$width? 也没有相关语法。

反转过来也OK
$arguments: 1, 2, 3;

@mixin name ($a,$b,$c){
font-size: $a+ px;
padding-right: $b+ px;
padding-left: $c+ px;
}

p{
@include name ($arguments…)
}

翻译结果：
p {
font-size: 1px;
padding-right: 2px;
padding-left: 3px; }

向混合样式中导入内容 @content

这个我感觉是mixin的相反了。include插进mixin。
@mixin name {
html {
@content
}
}

@include name { //这里的用法很奇特不熟悉就对比下上面的
p {
color: red;
}
}

转换成sass理解就是
html {
p {
color: red;
}
}

这里还需要注意下如果没有html{} 包裹会怎么样？
对的你的name 会被这样翻译：
.name p {
color: red;
}

方便表示法

为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示

来看看作用域

$color: white;
@mixin colors($color: blue) {
background-color: $color;
@content;
border-color: $color;
}
.colors {
@include colors { color: $color; }
}

编译：
.colors{
background-color: blue;
color: white;
border-color: blue;
}

这个太简单了吧.. 自己看代码理解？就是一开始没有传值，所以在块里面是默认值嘛，然后content的
是引用外部的。嘛，很好理解。

注意这里就是没有被包裹，看上面我说的html{}去除，重点！name变成一个类 .name

真正的函数指令来了！

和mixin的区别在于有return

@function caculation ($a,$b){
@return ($a + $b) + px;
}
p {
font-size: caculation(1,2);
}

这里说下，一个我多次犯错的点就是我写函数的时候，使用的时候也喜欢加一个空格
，这个习惯要改，因为加了空格进去 caculation (1,2) 就被当成css的两部分了

输出格式

设置方式 :style option

:nested 这是默认输出的
这样让你看起来，知道他是嵌套的。
例如这样：

#main {
color: #fff;
background-color: #000; }

#main p {
width: 10em; }

.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }

:expanded
就平时手写那样
例如：
a {
…
}
a.b {
…
}
a.b .c{
…
}

:compact 每条样式只占据一行，嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。
a{}
a.b{}
a.b c{}

.nothing{}
.nothing.op{}

.nothing2{}

:compress 力求样式体积压缩到最小

本文标题:sass用法总结和思考

文章作者:日，我的纯webpack搭建的VUE SSR怎么就炸了？？？？

发布时间:2018-09-01, 13:13:31

最后更新:2018-09-04, 21:07:07

原始链接:https://kingbultsea.github.io/2018/09/01/sass设计/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

media pc mobile ipad

extend 占位符

extend .类

分音_

@media嵌套

@at-root

@if

for

数组

while$i: 6;@while $i > 0{ //6次 $i: $i +1;}

Mixin 与include

参数模式mixin

向混合样式中导入内容 @content

方便表示法

来看看作用域

真正的函数指令来了！

输出格式

while
$i: 6;
@while $i > 0{ //6次

$i: $i +1;
}