各位老铁们，大家好，今天由我来为大家分享WRITEAS道具，以及SCSS基本操作的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
#总结：代码复用性低；不易于维护n#注：现在，现在的CSS是可以定义变量的！！！n:root{n--red:#f3e1e1;n}二、出名的CSS预处理器介绍1.SCSS/SASS
SASS(.scss)。于2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。
LESS(.less)。于2009年诞生，借鉴了SASS的长处，并兼容了CSS语法，使得开发者使用起来更为方便顺手，但是相比于SASS，其编程功能不够丰富，反而促使SASS进化成为了SCSS。
Stylus(.styl)。于2010年诞生，出自Node.js社区，主要用来给Node项目进行CSS预处理支持，人气较前两者偏低。
Sass有两套语法：nn1.第一种或更新的语法被称为SCSS。它是CSS语法的扩展。这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件。下文描述的Sass功能增强了此语法。使用此语法的文件扩展名为.scss。nn2.第二种或更旧的语法被称为SASS。提供了一种更为简洁的CSS编写方式。它使用缩进而不是方括号来表示选择器的嵌套，并使用换行符而不是分号来分隔属性。使用此语法的文件扩展名为.sass。nn任何一种格式可以直接导入(@import)到另一种格式中使用，或者通过sass-convert命令行工具转换成另一种格式四、使用CSS预处理器的优劣1.优点
CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题。支持嵌套、变量和逻辑等。可以让CSS更加简洁、提高代码复用性、逻辑分明等等2.缺点
css的文件体积和复杂度不可控；增加了调试难度和成本等。五、选择SCSS的原因官方介绍Sass是一款强化CSS的辅助工具，它在CSS语法的基础上增加了变量(variables)、嵌套(nestedrules)、混合(mixins)、导入(inlineimports)等高级功能，这些拓展令CSS更加强大与优雅。使用Sass以及Sass的样式库（如Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。特色功能完全兼容CSS3在CSS基础上增加变量、嵌套(nesting)、混合(mixins)等功能通过函数进行颜色值与属性值的运算提供控制指令(controldirectives)等高级功能自定义输出格环境配置
less、scss(sass)和stylus代码并不能被浏览器直接解析，所以必须先将它们编译成css代码nn现有框架已经提供了css预处理器选项，编译相关配置会自动帮我们生成！所以只有在"练习"情况下才有必要安装该环境一、安装分类1.不依赖编辑器
#全局安装scss预处理器，使用终端命令实现编译nna.Node环境下的node-sass模块nb.Node环境下的dart-sass模块nc.Ruby环境下的sass模块nd.Dart环境下的sass模块nn#注：这里的推荐顺序针对的是"练习"场景，而开发环境下推荐使用的是dart-sassn#本质：某个语言的第三方库或者命令行工具2.依赖编辑器
a.IDE代表：Webstrom前提是安装上述"1"中的命令行编译工具，配置自动命令，另安装一个代码提示插件scssnb.编辑器代表：vscode安装EasySass（编译）和Sass（代码提示）两个插件二、安装步骤1.不依赖编辑器Node环境-node-sassa.安装
1.安装nodehttps://nodejs.org(官网)或https://npm.taobao.org/mirrors/node(镜像)n2.*安装cnpm(不推荐直接将源换为淘宝镜像!!)$npmi-gcnpm--registry=https://registry.npm.taobao.orgn3.安装node-sass$npmi-gnode-sass或$cnpmi-gnode-sassn4.检查是否安装成功$node-sass-vb.使用单文件编译$node-sass原有的scss文件生成的css文件$node-sass原有的scss文件-o生成目录#example:$node-sassa.scssb.css$node-sassa.scsscss_files多文件编译$node-sass原有的scss文件目录-o生成的css文件目录#example:$node-sassc-od文件监听模式#在"1"和"2"的基础上填加"-w"命令行参数即可$node-sass-w原有的scss文件-o生成目录$node-sass-w原有的scss文件目录-o生成的css文件目录#example:$node-sass-wscss-ocss#效果：编译进程不结束，监听文件内容-dart-sassa.安装
1.安装nodehttps://nodejs.org(官网)或https://npm.taobao.org/mirrors/node(镜像)n2.*安装cnpm(不推荐直接将源换为淘宝镜像!!)$npmi-gcnpm--registry=https://registry.npm.taobao.orgn3.安装dart-sass$npmi-gsass或$cnpmi-gsassnnn#注：该模块为第三方库，所以可以考虑使用cnpmisass-D(-D==--save-dev)仅对某个小项目当做开发时依赖进行使用b.使用
/*该模块的官方文档：https://sass-lang.com/documentation/js-api*/nnnconstsass=require('sass');nnsass.render({file:scss_filename},function(err,result){/*...*/});n//ORnconstresult=sass.renderSync({file:scss_filename});nn//注：默认情况下renderSync()的速度是render()的两倍以上，这是由于异步回调所带来的开销而导致的Ruby环境a.安装
1.安装Rubyhttps://rubyinstaller.org/downloadsn2.*配置镜像$gemsources-ahttps://gems.ruby-china.com/-rhttps://rubygems.org/n3.*查看源$gemsources-l#确保只有gems.ruby-china.com一个源n4.安装scss$geminstallsassn5.检查是否安装成功$sass-v
#注：如果出现了SSL错误，修改~/.gemrc文件，增加ssl_verify_mode:0配置n#~表示用户根目录，windows的文件位置为C:\Users\用户名\.gemrcnn---n:sources:n-https://gems.ruby-china.comn:ssl_verify_mode:0b.使用
#注：最好带上"-C--sourcemap=none"参数n#注：Sass命令行工具根据文件的拓展名判断所使用的语法格式，没有文件名时sass命令默认编译.sass文件，添加--scss选项或者使用scss命令编译SCSS文件。单文件编译$sass原有的scss文件[:]生成的css文件#example:$sassa.scssb.css多文件编译$sass--watch原有的scss文件目录:生成的css文件目录#注：必须加"--watch"文件监听模式$sass--watch原有的scss文件:生成的css文件$sass--watch原有的scss文件目录:生成的css文件目录#example:$sass--watch-C--sourcemap=nonescss:css#效果：编译进程不结束，监听文件内容Dart环境a.安装
1.安装Darthttps://dart.dev/tools/sdk/archiven2.*配置镜像，添加环境变量https://pub.flutter-io.cn或https://mirrors.tuna.tsinghua.edu.cn/dart-pub/nwindows打开此电脑,添加系统变量PUB_HOSTED_URL=https://pub.flutter-io.cnnLinux键入$echo'exportPUB_HOSTED_URL="https://pub.flutter-io.cn"'>>~/.bashrc或/etc/profilenn4.安装sassn全局安装：$pubglobalactivatesass(可执行文件)n项目安装：pubspec.yaml填写好依赖后，执行$pubget(.dart代码)n5.检查是否安装成功$sass-vb.使用全局安装模式单文件编译$sass原有的scss文件[:]生成的css文件#example:$sassa.scssb.css多文件编译$sass原有的scss文件目录/:生成的css文件目录/#example:$sassscss/:css/文件监听模式$sass--watch原有的scss文件:生成的css文件$sass--watch原有的scss文件目录:生成的css文件目录#注：都必须加上":"#example:$sass--watchscss:css#效果：编译进程不结束，监听文件内容局部安装模式
2.运行.dart代码n//前提是在pubsepc.yaml文件中添加依赖n//dev_dependencies:n//sass:lastestnn//main.dartnimport'package:sass/sass.dart'assass;nnvoidmain(List<String>args){nprint(sass.compile(args.first));n}n//ornvoidmain(List<String>args){nvarresult=sass.compile(arguments[0]);nnewFile(arguments[1]).writeAsStringSync(result);n}n//dartmain.dartstyles.scssstyles.css2.依赖编辑器WebStrom安装上述命令行工具之一（以node-sass为例演示）依次打开并点击：webstrom->Settings->Tools->FilesWatchers->+->选择SCSS文件标识Name随意写，供自己看而已FileType选择SCSSStyleSheetScope选择AllPlacesProgram选择可执行文件的路径（这里以node-sass为例）Arguments按需选择（这里以$FileName$:$FileNameWithoutExtension$.css为例）Outputpathstorefresh按需选择（这里以$FileNameWithoutExtension$.css为例）点击OK，配置完成VSCode安装EasySass（编译）和Sass（代码提示）两个插件（注意大小写，否则找不到）点击插件右下角的设置图标后点击"扩展设置"，最后点击"在settings.json中编辑"，开始设置关于EasySass的配置会自动生成下方图片内的配置添加"easysass.targetDir":$path，可将编译后的css文件放入$path路径下(默认为当前路径)。例如生成到css文件下内SassScript
在CSS属性的基础上Sass提供了一些名为SassScript的新功能。SassScript可作用于任何属性，允许属性使用变量、算数运算等额外功能。nn弱类型语言,对语法要求没那么严格一、注释Sass支持标准的CSS多行注释/**/，以及单行注释//，前者会被完整输出到编译后的CSS文件中，而后者则不会。将!作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到CSS文件中，通常用于添加版权信息。插值语句(interpolation)也可写进多行注释中输出变量值
例如：
/*nhellonworld!n*/nn//compilescssfilestocssn//it'sreadytodoit.n$pink:#f3e1e1;nhtml{nbackground-color:$pink;n}nn$author:'gdream@126.com';n/*!nAuthor:#{$author}.n*/
开发模式编译后:
/*nhellonworld!n*/nhtml{nbackground-color:#f3e1e1;n}n/*!nAuthor:'gdream@126.com'.n*/
压缩输出模式编译后：
html{nbackground-color:#f3e1e1;n}n/*!nAuthor:'gdream@126.com'.n*/二、变量1.定义
变量以美元符号开头，赋值方法与CSS属性的写法一样
$width:1600px;n$pen-size:3em;2.使用
直接使用变量的名称即可调用变量
#app{nheight:$width;nfont-size:$pen-size;n}3.作用域
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加!global声明
#foo{n$width:5em!global;nwidth:$width;n}nn#bar{nwidth:$width;n}
编译后：
#foo{nwidth:5em;n}nn#bar{nwidth:5em;n}三、数据类型
SassScript支持7种主要的数据类型：
SassScript也支持其他CSS属性值，比如Unicode字符集，或!important声明。然而Sass不会特殊对待这些属性值，一律视为无引号字符串。
判断数据类型的方式：type-of($value)
SassScript支持CSS的两种字符串类型：有引号字符串(quotedstrings)，和无引号字符串(unquotedstrings)。
$name:'TomBob';n$container:"topbottom";n$what:heart;nn//注：在编译CSS文件时不会改变其类型。只有一种情况例外，使用`#{}`(interpolation)时，有引号字符串将被编译为无引号字符串，这样便于在mixin中引用选择器名2.数字(Numbers)
SassScript支持两种数字类型：带单位数字和不带单位数字。（可正可负可为零，可正可浮点）
$my-age:19;n$your-age:19.5;n$height:120px;nn//注：单位会和数字当做一个整体，进行算数运算3.空值(Null)
只有一个取值null
$value:null;nn//注：由于它代表空，所以不能够使用它与任何类型进行算数运算4.布尔型(Booleans)
只有两个取值：true和false
$a:true;n$b:false;nn//注：只有自身是false和null才会返回false，其他一切都将返回true5.数组(Lists)
通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组——只包含一个值的数组。索引从1开始
$list0:1px2px5px6px;n$list1:1px2px,5px6px;n$list2:(1px2px)(5px6px);
数组中可以包含子数组，比如1px2px,5px6px是包含1px2px与5px6px两个数组的数组。如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成(1px2px)(5px6px)。变化是，之前的1px2px,5px6px使用逗号分割了两个子数组(comma-separated)，而(1px2px)(5px6px)则使用空格分割(space-separated)。
当数组被编译为CSS时，Sass不会添加任何圆括号（CSS中没有这种写法），所以(1px2px)(5px6px)与1px2px,5px6px在编译后的CSS文件中是完全一样的，但是它们在Sass文件中却有不同的意义，前者是包含两个数组的数组，而后者是包含四个值的数组。
用()表示不包含任何值的空数组（在Sass3.3版之后也视为空的map）。空数组不可以直接编译成CSS，比如编译font-family:()Sass将会报错。如果数组中包含空数组或空值，编译时将被清除，比如1px2px()3px或1px2pxnull3px。
基于逗号分隔的数组允许保留结尾的逗号，这样做的意义是强调数组的结构关系，尤其是需要声明只包含单个值的数组时。例如(1,)表示只包含1的数组，而(123,)表示包含123这个以空格分隔的数组的数组。
Maps必须被圆括号包围，可以映射任何类型键值对（任何类型，包括内嵌maps，不过不推荐这种内嵌方式）
$map:(n$key1:value1,n$key2:value2,n$key3:value3n)7.颜色(Colors)
CSS原有颜色类型，十六进制、RGB、RGBA、HSL、HSLA和色彩单词
SCSS提供了内置Colors函数，从而更方便地使用颜色
$color0:green;n$color1:lighten($color,15%);n$color2:darken($color,15%);n$color3:saturate($color,15%);n$color4:desaturate($color,15%);n$color5:(green+red);四、运算1.数字运算符
SassScript支持数字的加减乘除、取整等运算(+,-,*,/,%)，如果必要会在不同单位间转换值
如果要保留运算符号，则应该使用插值语法
大前提：两端必须为数字或前部分数字后部分字符
作用范围：相等运算==,!=可用于所有数据类型
$a:1==1px;//truen$b:"a"==a;//truen//总结：n前部分为不带引号数字时，对比的仅仅是数字部分；反之，忽略引号，要求字符一一对应4.布尔运算符
SassScript支持布尔型的andor以及not运算。
$a:1>0and0>=5;//faslen//总结：n值与"and"、"or"和"not"之间必须要有空格，否则会被看做字符串5.颜色值运算
颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值
通过#{}插值语句可以在选择器、属性名和属性值中使用变量。
但大多数情况下，这样使用属性值可能还不如直接使用变量方便，但是使用#{}可以避免Sass运行运算表达式，直接编译CSS。
$name:foo;n$attr:border;np.#{$name}{n#{$attr}-color:$name;n}nn//编译后：np.foo{nborder-color:foo;n}2.&inSassScript
&为父选择器
a{ncolor:yellow;n&:hover{ncolor:green;n}n&:active{ncolor:blank;n}n}3.!default
可以在变量的结尾添加!default给一个未通过!default声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。
$content:"Firstcontent";n$content:"Secondcontent?"!default;n$new_content:"Firsttimereference"!default;nn#main{ncontent:$content;nnew-content:$new_content;n}nn//编译为：n#main{ncontent:"Firstcontent";nnew-content:"Firsttimereference";}
注意：变量是null空值时将视为未被!default赋值。
如果@extend失败会收到错误提示，比如，这样写a.important{@extend.notice}，当没有.notice选择器时，将会报错，只有h1.notice包含.notice时也会报错，因为h1与a冲突，会生成新的选择器。
如果要求@extend不生成新选择器，可以通过!optional声明达到这个目的.
简而言之：当@extend相关代码出现语法错误时，编译器可能会给我们"乱"编译为css，我们加上这个参数可以在出现问题后不让他编译该部分代码
Sass拓展了@import的功能，允许其导入SCSS或SASS文件。被导入的文件将合并编译到同一个CSS文件中，另外，被导入的文件中所包含的变量或者混合指令(mixin)都可以在导入的文件中使用。
通常，@import寻找Sass文件并将其导入，但在以下情况下，@import仅作为普通的CSS语句，不会导入任何Sass文件。
如果不在上述情况内，文件的拓展名是.scss或.sass，则导入成功。没有指定拓展名，Sass将会试着寻找文件名相同，拓展名为.scss或.sass的文件并将其导入。
@import"foo.scss";n@import"foo";n//以上两种方式均可nnn//以下方式均不可行n@import"foo.css";n@import"foo"screen;n@import"http://foo.com/bar";n@importurl(foo);
Sass允许同时导入多个文件，例如同时导入rounded-corners与text-shadow两个文件：
@import"rounded-corners","text-shadow";
导入文件也可以使用#{}插值语句，但不是通过变量动态导入Sass文件，只能作用于CSS的url()导入方式：
$family:unquote("Droid+Sans");n@importurl("http://fonts.googleapis.com/css?family=\#{$family}");nn//编译为：n@importurl("http://fonts.googleapis.com/css?family=Droid+Sans");
如果你有一个SCSS或Sass文件需要引入，但是你又不希望它被编译为一个CSS文件，这时，你就可以在文件名前面加一个下划线，就能避免被编译。这将告诉Sass不要把它编译成CSS文件。然后，你就可以像往常一样引入这个文件了，而且还可以省略掉文件名前面的下划线。
除此之外，还支持嵌套@import,但是不可以在混合指令(mixin)或控制指令(controldirectives)中嵌套@import。
Sass中@media指令与CSS中用法一样，只是增加了一点额外的功能：允许其在CSS规则中嵌套。如果@media嵌套在CSS规则内，编译时，@media将被编译到文件的最外层，包含嵌套的父选择器。这个功能让@media用起来更方便，不需要重复使用选择器，也不会打乱CSS的书写流程。
.sidebar{nwidth:300px;n@mediascreenand(orientation:landscape){nwidth:500px;n}n}n//编译为n.sidebar{nwidth:300px;n@mediascreenand(orientation:landscape){nwidth:500px;n}n}n@media`的queries允许互相嵌套使用，编译时，Sass自动添加`andn@mediascreen{n.sidebar{n@media(orientation:landscape){nwidth:500px;n}n}n}n//编译为：n@mediascreenand(orientation:landscape){n.sidebar{nwidth:500px;}}
@media甚至可以使用SassScript（比如变量，函数，以及运算符）代替条件的名称或者值
$media:screen;n$feature:-webkit-min-device-pixel-ratio;n$value:1.5;nn@media#{$media}and($feature:$value){n.sidebar{nwidth:500px;n}n}n//编译为：n@mediascreenand(-webkit-min-device-pixel-ratio:1.5){n.sidebar{nwidth:500px;}}3.*@extend
@extend即继承。在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。
总的来看：支持层叠继承、多继承、允许延伸任何定义给单个元素的选择器（但是允许不一定好用）
.error{nborder:1px#f00;nbackground-color:#fdd;n}n.seriousError{n@extend.error;nborder-width:3px;n}n//上面代码的意思是将.error下的所有样式继承给.seriousError，border-width:3px;是单独给.seriousError设定特殊样式，这样，使用.seriousError的地方可以不再使用.error。
@extend的作用是将重复使用的样式(.error)延伸(extend)给需要包含这个样式的特殊样式（.seriousError）
.error{nborder:1px#f00;nbackground-color:#fdd;n}n.error.intrusion{nbackground-image:url("/image/hacked.png");n}n.seriousError{n@extend.error;nborder-width:3px;n}n//.error,.seriousError{nborder:1px#f00;nbackground-color:#fdd;}nn.error.intrusion,.seriousError.intrusion{nbackground-image:url("/image/hacked.png");}nn.seriousError{nborder-width:3px;}
当合并选择器时，@extend会很聪明地避免无谓的重复，.seriousError.seriousError将编译为.seriousError，不能匹配任何元素的选择器也会删除。
b.延伸复杂的选择器：Class选择器并不是唯一可以被延伸(extend)的，Sass允许延伸任何定义给单个元素的选择器，比如.special.cool，a:hover或者a.user[href^="http://"]等
c.多重延伸：同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器
d.继续延伸：当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个
e.*选择器列：暂时不可以将选择器列(SelectorSequences)，比如.foo.bar或.foo+.bar，延伸给其他元素，但是，却可以将其他元素延伸给选择器列。
尽量不使用合并选择器列，因为如果凭个人推理的话，会出现排列组合的情况，所以SASS编译器只会保留有用的组合形式，但依旧会存在排列组合的情况，有可能会留下隐患。
在指令中使用@extend时（比如在@media中）有一些限制：Sass不可以将@media层外的CSS规则延伸给指令层内的CSS.
g.%placeholder为选择器占位符，配合@extend-Only选择器使用。
效果：只定义了样式，但不会对原有选择器匹配的元素生效
//example1:n%img{ncolor:red;n}n.path{n@extend%img;n}n//编译后：n.path{ncolor:red;n}n//example2:n#contexta%extreme{ncolor:blue;nfont-weight:bold;nfont-size:2em;n}n//编译后：n.notice{n@extend%extreme;n}nn//注：必须是"."和"#"选择器4.@at-root
The@at-rootdirectivecausesoneormorerulestobeemittedattherootofthedocument,ratherthanbeingnestedbeneaththeirparentselectors.Itcaneitherbeusedwithasingleinlineselector
译文：@atroot指令使一个或多个规则在文档的根发出，而不是嵌套在其父选择器下。它可以与单个内联选择器一起使用
@at-root默认情况下并不能使规则或者选择器跳出指令，通过使用without和with可以解决该问题
用于调试，按标准错误输出流输出
$size:9px;nn.file{n@debug$size;n}6.@warn
用于警告，按标准错误输出流输出
用于报错，按标准错误输出流输出
用于将样式规则设置为不同的媒体类型
用于调试，按标准错误输出流输出
用于警告，按标准错误输出流输出
用于报错，按标准错误输出流输出
表达式：if(expression,value1,value2)
p{ncolor:if(1+1=2,green,yellow);n}nn//compile:np{ncolor:green;}2.@if
条件语句
当@if的表达式返回值不是false或者null时，条件成立，输出{}内的代码
@if声明后面可以跟多个@elseif声明，或者一个@else声明。如果@if声明失败，Sass将逐条执行@elseif声明，如果全部失败，最后执行@else声明
表达式：@for$varfrom<start>through<end>或@for$varfrom<start>to<end>
@for$ifrom1through3{n.item-#{$i}{width:2em*$i;}n}nn//compile:n.item-1{nwidth:2em;}n.item-2{nwidth:4em;}n.item-3{nwidth:6em;}4.@while
循环语句
@while指令重复输出格式直到表达式返回结果为false。这样可以实现比@for更复杂的循环，只是很少会用到
$i:6;n@while$i>0{n.item-#{$i}{width:2em*$i;}n$i:$i-2;n}nn//compile:n.item-6{nwidth:12em;}n.item-4{nwidth:8em;}n.item-2{nwidth:4em;}5.@each
循环语句
$vars`只能是`Lists`或者`Maps一维列表@each$animalinpuma,sea-slug,egret,salamander{.#{$animal}-icon{background-image:url('/images/#{$animal}.png');}}//compile:.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');}二维列表@each$animal,$color,$cursorin(puma,black,default),(sea-slug,blue,pointer),(egret,white,move){.#{$animal}-icon{background-image:url('/images/#{$animal}.png');border:2pxsolid$color;cursor:$cursor;}}//compile:.puma-icon{background-image:url('/images/puma.png');border:2pxsolidblack;cursor:default;}.sea-slug-icon{background-image:url('/images/sea-slug.png');border:2pxsolidblue;cursor:pointer;}.egret-icon{background-image:url('/images/egret.png');border:2pxsolidwhite;cursor:move;}maps@each$header,$sizein(h1:2em,h2:1.5em,h3:1.2em){#{$header}{font-size:$size;}}//compile:h1{font-size:2em;}h2{font-size:1.5em;}h3{font-size:1.2em;}九、混合指令
混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的class，比如.float-left。混合指令可以包含所有的CSS规则，绝大部分Sass规则，甚至通过参数功能引入变量，输出多样化的样式。
注意：这不是函数！没有返回值！！
混合指令的用法是在@mixin后添加名称与样式，以及需要的参数（可选）。
//格式：n@mixinname{n//样式....n}n//example：n@mixinlarge-text{nfont:{nfamily:Arial;nsize:20px;nweight:bold;n}ncolor:#ff0000;n}2.引用混合样式
使用@include指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）。
//格式：n@includename;nn//注：无参数或参数都有默认值时，带不带括号都可以n//example：np{n@includelarge-text;n}nn//compile:np{nfont-family:Arial;nfont-size:20px;nfont-weight:bold;ncolor:#ff0000;n}3.参数
格式：按照变量的格式，通过逗号分隔，将参数写进Mixin名称后的圆括号里
支持默认值；支持多参数；支持不定参数；支持位置传参和关键词传参
@mixinmp($width){nmargin:$width;n}nnbody{n@includemp(300px);n}b.关键词传参
@mixinmp($width){nmargin:$width;n}nnbody{n@includemp($width:300px);n}c.参数默认值
@mixinmp($width:500px){nmargin:$width;n}nnbody{n@includemp($width:300px);n//orn@includemp(300px);n}d.不定参数
官方：VariableArguments
有时，不能确定混合指令需要使用多少个参数。这时，可以使用参数变量…声明（写在参数的最后方）告诉Sass将这些参数视为值列表处理
@mixinmar($value...){nmargin:$value;n}4.向混合样式中导入内容
在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在@content标志的地方
@mixinexample{nhtml{n@content;n}n}n@includeexample{nbackground-color:red;n.logo{nwidth:600px;n}n}nn//compile:nhtml{nbackground-color:red;n}nnhtml.logo{nwidth:600px;n}十、函数指令1.内置函数a.字符串函数
索引第一个为1，最后一个为-1；切片两边均为闭区间
str-index($string，$substring)
str-insert($string,$insert,$index)
在$string的$index处插入$insert
str-slice($string,$start-at,$end-at）
截取$string的$start-at和$end-at之间的字符串
不传入值：获得0-1的随机数；传入正整数n：获得0-n的随机整数（左开右闭）
join($list1,$list2,$separator)
拼接$list1和list2；$separator为新list的分隔符，默认为auto，可选择comma、space
向$list的末尾添加$val；$separator为新list的分隔符，默认为auto，可选择comma、space
将几个列表结合成一个多维的列表；要求每个的列表个数值必须是相同的
合并$map1和$map2，返回一个新$map
从$map中删除$key，返回一个新$map
判断$map中是否存在$key，返回对应的布尔值
返回一个函数的参数，并可以动态修改其值
判断$number是否带单位，返回对应的布尔值
判断$number1和$number2是否可以做加、减和合并，返回对应的布尔值
Sass支持自定义函数，并能在任何属性值或Sassscript中使用
关于WRITEAS道具的内容到此结束，希望对大家有所帮助。
还没有评论，来说两句吧...