.button-box{/deep/.el-button{padding:13px50px;}}css预处理器一、scss的使用Sass是一个成熟、稳定、强大的CSS预处理器，而SCSS是2010年5月Sass3版本中引入的新语法特性，该语法旨在弥合Sass之间的差距和CSS通过引入CSS友好的语法。在完全兼容CSS3的同时，继承了Sass强大的动态功能。sass和scss的区别在于文件扩展名不同。Sass使用后缀“。写的时候没有花括号（{}）和分号（;），SCSS的语法写的和我们的CSS语法很像。//sass语法：$font-stack:Helvetica,sans-serif//定义变量$primary-color:#333//定义变量bodyfont:100%$font-stackcolor:$primary-color//scsssyntax:$font-stack:Helvetica,sans-serif;$primary-color:#333;body{font:100%$font-stack;color:$primary-color;}scssvariable变量用于存储CSS中需要复用的信息，如颜色、字体等，SASS使用$符号声明一个变量。$primary-color:#333;body{color:$primary-color;}scss嵌套:nav{ul{margin:0;填充：0；列表样式：无；li{显示：内联块；&>a{//父选择器的标识符&color:red}}}}@importimport//_reset.scsshtml,body,ul,ol{margin:0;padding:0;}//base.scss@import'reset';body{字体:100%Helvetica,sans-serif;background-color:#efefef;}将scss文件导入scss时可以省略文件扩展名函数：sass自带函数max,min,ceil,floor,view全部自带函数列表自定义函数：@functionaddWidth($width1,$width2){@return$width1+$width2;}div{width:addWidth(100px,20px);}混入混合（Mixin）来分组那些对于页面中需要复用的CSS声明，开发者可以将可变参数传递给Mixin，使代码更加灵活。添加浏览器兼容性前缀时，此功能非常有用。SASS目前使用@mixin名称指令进行混合操作。@mixin圆角{-moz-border-radius:5px;-webkit-边框半径：5px；border-radius:5px;}.notice{background-color:green;边框：2px实心#00aa00；-corners;}您可以通过在引入混音器时将参数传递给混音器来自定义混音器生成的确切样式。此方法与JavaScript函数非常相似：@mixinlink-colors($normal,$hover,$visited){color:$normal;&:hover{color:$hover;}&:visited{color:$visited;}}a{@includelink-colors(blue,red,green)}@extendinherit.error{border:1pxsolidred;背景色：#fdd;}.seriousError{@extend.error;边框宽度：3px；}深度效果选择器.button-box{/deep/.el-button{padding:13px50px;}}基本操作://add:+.div1{width:10px+10px;}.div2{width:10px+10;}//minus:-.div1{width:10px-5px;}.div2{width:10px-5;}//相乘:*.div1{width:10px*px;//报错}.div2{width:20px;}except:/.div1{//不正确的宽度：10px/2;}.div2{//不正确的宽度：10px/2px;}.div3{//不正确的宽度：(10px/2px);}.div4{//正确的宽度：(10px/2);}插值语句$height:10px;$name:height;.div-#{$name}{#{$name}:#{$height};}@if,@for,@each,@while$type:monster;p{@if$type==ocean{颜色：蓝色；}@elseif$type==matador{颜色：红色；}@else如果$type==monster{颜色：绿色；}@else{颜色：黑色；}}@mixindoes-parent-exist{@if&{&:hover{颜色：红色；}}@else{a{颜色：红色；}}}//如果没有父选择器，&的值为空，可以在mixin中使用它来检测父选择器是否存在@for$ifrom1through3{.item-#{$i}{宽度：2em*$i;}}//等于.item-1{width:2em;}.item-2{width:4em;}.item-3{width:6em;}2.less的使用是一个gatecss预处理扩展了CSS语言并添加变量、mixins、函数等功能，使CSS更易于维护，易于制作主题，扩展Less运行在Node或浏览器上。嵌套：.container{h1{font-size:25px;颜色：#E45456；}p{字体大小：25px；颜色：#3C7949；}.myclass{h1{字体大小：25px；颜色：#E45456；}p{字体大小：25px；颜色：#3C7949；}}}Variables://使用@XXX在less中定义变量@width:10px;@height:@width+10px;#header{宽度：@width;高度：@height；}@b：box@rem：64px；#{@b}1{宽度：@width*2；高度：@width*@rem；background:red;}//写在{}之间称为局部变量，只能在{}之间起作用。框{@width:200px;width:@width;}mixedin//无参数，无默认值。div1{宽度：200px;高度：200px；backgorund-color;red;}.div2{border:1pxsolidred;.div1}//带参数，无默认值.div1(@w){border:solidred@w;}.div2{widthz;200px;高度：200px;.div2(30px);}//带参数和默认值.div1(@w:3px){norder:solidred@w'}.div2{widthz;200px;高度：200px；.div2();//不传参数（但必须有括号），默认3px，参数为新值}//在mix中添加判断条件。width(@weight)when(@weight>200px){width:@weight;}#box2{//没有效果.width(200px);}#box3{.width(300px);}
