-
用@mixin定义混合宏，再用@include引用，编译后，引用的部分全是分开写，重复度较高； 用@extend继承样式块，则在编译后，会将用到的部分合并在一起查看全部
-
.box { margin-bottom: 5px; } .btn, .box { @include border-radius; } 混合宏的参数--传多个参数 多个参数mixin 调用时可直接传入值，如 @include传入参数的个数小于 @mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。 //sass style //------------------------------- @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){ border-bottom:$border; padding-top:$padding; padding-bottom:$padding; } .imgtext-h li{ @include horizontal-line(1px solid #ccc); } .imgtext-h--product li{ @include horizontal-line($padding:15px); } //css style //------------------------------- .imgtext-h li { border-bottom: 1px solid #cccccc; padding-top: 10px; padding-bottom: 10px; } .imgtext-h--product li { border-bottom: 1px dashed #cccccc; padding-top: 15px; padding-bottom: 15px; }查看全部
-
Sass 混合宏除了能传一个参数之外，还可以传多个参数 @mixin size($width,$height){ width: $width; height: $height; } .box-center { @include size(500px,300px); } //有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代，如： @mixin box-shadow($shadows...){ @if length($shadows) >= 1 { -webkit-box-shadow: $shadows; box-shadow: $shadows; } @else { $shadows: 0 0 2px rgba(#000,.25); -webkit-box-shadow: $shadow; box-shadow: $shadow; } } .box { @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2)); }查看全部
-
调用一个带有参数值的混合宏，带参数使用该参数，不带则为默认参数值。 @mixin border-radius($radius:3px) { -webkit-border-radius: $radius; border-radius: $radius; } .btn { @include border-radius; } .box { @include border-radius(50%); } 混合宏的参数--传多个参数----------多组值参数mixin 如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如 $variables...。 //sass style //------------------------------- //box-shadow可以有多组值，所以在变量参数后面添加... @mixin box-shadow($shadow...) { -webkit-box-shadow:$shadow; box-shadow:$shadow; } .box{ border:1px solid #ccc; @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3)); } //css style //------------------------------- .box{ border:1px solid #ccc; -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3); box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3); }查看全部
-
在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”,在调用的时候可以给这个混合宏传一个参数值. @mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(3px); } @content @content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使 @mixin接受一整块样式，接受的样式从@content开始。 //sass style //------------------------------- @mixin max-screen($res){ @media only screen and ( max-width: $res ) { @content; } } @include max-screen(480px) { body { color: red } } //css style //------------------------------- @media only screen and (max-width: 480px) { body { color: red } } PS： @mixin通过 @include调用后解析出来的样式是以拷贝形式存在的，而下面的继承则是以联合声明的方式存在的，所以从3.2.0版本以后，建议传递参数的用 @mixin，而非传递参数类的使用下面的继承 %。查看全部
-
@mixin 申明混合宏 @include 调用混合宏 @mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; } button { @include border-radius; }查看全部
-
你可以在大括号里面写上带有逻辑关系，帮助更好的做你想做的事情,如： @mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } } 这个 box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。简单的解释一下，当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。查看全部
-
在 Sass 中，使用“@mixin”来声明一个混合宏。如： @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; }查看全部
-
连体符&替代元素自身。 如：我们要编译如下的css 3 .mod.on { color: green; } 那么在Sass中，同样可以使用&来替代选择器.mod： .mod { &.on{ color: green; } } 需要注意的是&和相连的类名之间不能有任何的空格，不然就会变成CSS选择器中的后代选择器。 如这里多了空格 .mod { & .on { color: green; } } 那么编译出来是css就是 .mod .on { color: green; }查看全部
-
属性嵌套 常用于 border、border、margin、padding、font 等属性 例如： .box { border-top: 1px solid red; border-bottom: 1px solid green; } .box { border: { top: 1px solid red; bottom: 1px solid green; } }查看全部
-
header { nav { a { color: green;} } } nav { a { color: red; } } 这样逻辑清楚易懂, 但是这样代码量就成倍增加了, nav { a { color: red; header & { color: yellow; } } } 这样, 公共部分就可以复用了. 虽然 header 在 a 中, 但是用 & 写法, 就表示, & 之前的字符串连接起来, + nav + a;查看全部
-
//SCSS $color: orange !default;//定义全局变量 .block { color: $color;//调用全局变量 } em { $color: red;//定义局部变量（全局变量 $color 的影子） a { color: $color;//调用局部变量 } }查看全部
-
!default是干什么的 默认值就是全局变量的声明，相当于js中的window对象。 全局变量 目前变量机制 在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量) $fontSize: 12px; body{ $fontSize: 14px; font-size:$fontSize; } p{ font-size:$fontSize; } body{ font-size:14px; } p{ font-size:14px; } 启用global之后的机制 请注意，这个目前还无法使用，所以样式不是真实解析出来的。 $fontSize: 12px; $color: #333; body{ $fontSize: 14px; $color： #fff !global; font-size:$fontSize; color:$color; } p{ font-size:$fontSize; color:$color; } body{ font-size:14px; color:#fff; } p{ font-size:12px; color:#fff; } 这里设置了两个变量，然后在body里面重新设置了下，有点不同的是对于 $color变量，我们设置了 !global。通过编译后的css可以看到 font-size取值不同，而 color取值相同。与上面的机制对比就会发现默认在选择器里面的变量为局部变量，而只有设置了 !global之后才会成为全局变量。查看全部
-
只有满足所有下述标准时方可创建新变量： 该值至少重复出现了两次； 该值至少可能会被更新一次； 该值所有的表现都与变量有关（非巧合）。 基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。查看全部
-
[Sass]普通变量与默认变量 普通变量 定义之后可以在全局范围内使用。 默认变量 sass 的默认变量仅需要在值后面加上 !default 即可。 sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。 $baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; } 编译后的css代码： body{ line-height:2; } 注意：一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以 #{$variables}形式使用。 //sass style //------------------------------- $borderDirection: top !default; $baseFontSize: 12px !default; $baseLineHeight: 1.5 !default; //应用于class和属性 .border-#{$borderDirection}{ border-#{$borderDirection}:1px solid #ccc; } //应用于复杂的属性值 body{ font:#{$baseFontSize}/#{$baseLineHeight}; } //css style //------------------------------- .border-top{ border-top:1px solid #ccc; } body { font: 12px/1.5; }查看全部
举报
0/150
提交
取消