sass--案例

  1 //变量的引用
  2 $color:red;
  3 .test{
  4     color : $color;
  5 }
  6 
  7 
  8 $side : left;
  9 .rounded {
 10     border-#{$side}-radius:2px;
 11 }
 12 
 13 //属性名变量的引用
 14 $side : left;
 15 .rounded {
 16     border-#{$side}-radius:2px;
 17 }
 18 
 19 
 20 nav {
 21     ul {
 22         margin: 0;
 23         padding: 0;
 24         list-style: none;
 25     }
 26 
 27       li { display: inline-block; }
 28 
 29       a {
 30         display: block;
 31         padding: 6px 12px;
 32         text-decoration: none;
 33       }
 34 }
 35 
 36 //默认值覆盖 2
 37 $baseLineHeight: 2;
 38 $baseLineHeight: 1.5 !default;
 39 body{
 40     line-height: $baseLineHeight; 
 41 }
 42 
 43 //全局变量
 44 $color: orange !default;
 45 .block {
 46   color: $color;
 47 }
 48 //局部变量
 49 em {
 50   $color: red;
 51   a {
 52     color: $color;
 53   }
 54 }
 55 
 56 span {
 57   color: $color;
 58 }
 59 
 60 //父节点，内嵌
 61 nav {
 62   a {
 63     color: red;
 64 
 65     header & {
 66       color:green;
 67     }
 68   }  
 69 }
 70 
 71 //  border-top: 1px solid red;  border-bottom: 1px solid green;
 72 .box {
 73   border: {
 74        top: 1px solid red;
 75        bottom: 1px solid green;
 76   }
 77 }
 78 
 79 //伪类
 80 .clearfix{
 81 &:before,
 82 &:after {
 83     content:"";
 84     display: table;
 85   }
 86 &:after {
 87     clear:both;
 88     overflow: hidden;
 89   }
 90 }
 91 
 92 
 93 //方法重用
 94 @mixin border-radius{
 95     -webkit-border-radius: 5px;
 96     border-radius: 5px;
 97 }
 98 button {
 99     @include border-radius;
100 }
101 
102 
103 
104 @mixin border-radius($radius:5px){
105     -webkit-border-radius: $radius;
106     border-radius: $radius;
107 }
108 .box {
109   @include border-radius(3px);
110 }
111 .btn {
112   @include border-radius;
113 }
114 .box {
115   @include border-radius(50%);
116 }
117 
118 
119 
120 @mixin box-shadow($shadows...){
121   @if length($shadows) >= 1 {
122     -webkit-box-shadow: $shadows;
123     box-shadow: $shadows;
124   } @else {
125     $shadows: 0 0 2px rgba(#000,.25);
126     -webkit-box-shadow: $shadow;
127     box-shadow: $shadow;
128   }
129 }
130 .box {
131   @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
132 }
133 
134 
135 @mixin center($width,$height){
136   width: $width;
137   height: $height;
138   position: absolute;
139   top: 50%;
140   left: 50%;
141   margin-top: -($height) / 2;
142   margin-left: -($width) / 2;
143 }
144 .box-center {
145   @include center(500px,300px);
146 }
147 
148 
149 //继承
150 .btn {
151   border: 1px solid #ccc;
152   padding: 6px 10px;
153   font-size: 14px;
154 }
155 
156 .btn-primary {
157   background-color: #f36;
158   color: #fff;
159   @extend .btn;
160 }
161 
162 .btn-second {
163   background-color: orange;
164   color: #fff;
165   @extend .btn;
166 }
167 
168 
169 
170 //占位符 %placeholder
171 %mt5 {
172   margin-top: 5px;
173 }
174 %pt5{
175   padding-top: 5px;
176 }
177 
178 .btn {
179   @extend %mt5;
180   @extend %pt5;
181 }
182 
183 .block {
184   @extend %mt5;
185 
186   span {
187     @extend %pt5;
188   }
189 }
190 
191 
192 //插值
193 $properties: (margin, padding);
194 @mixin set-value($side, $value) {
195     @each $prop in $properties {
196         #{$prop}-#{$side}: $value;
197     }
198 }
199 .login-box {
200     @include set-value(top, 14px);
201 }
202 
203 @mixin generate-sizes($class, $small, $medium, $big) {
204     .#{$class}-small { font-size: $small; }
205     .#{$class}-medium { font-size: $medium; }
206     .#{$class}-big { font-size: $big; }
207 }
208 @include generate-sizes("header-text", 12px, 20px, 40px);

  1 .test {
  2   color: red;
  3 }
  4 
  5 .rounded {
  6   border-left-radius: 2px;
  7 }
  8 
  9 .rounded {
 10   border-left-radius: 2px;
 11 }
 12 
 13 nav ul {
 14   margin: 0;
 15   padding: 0;
 16   list-style: none;
 17 }
 18 nav li {
 19   display: inline-block;
 20 }
 21 nav a {
 22   display: block;
 23   padding: 6px 12px;
 24   text-decoration: none;
 25 }
 26 
 27 body {
 28   line-height: 2;
 29 }
 30 
 31 .block {
 32   color: red;
 33 }
 34 
 35 em a {
 36   color: red;
 37 }
 38 
 39 span {
 40   color: red;
 41 }
 42 
 43 nav a {
 44   color: red;
 45 }
 46 header nav a {
 47   color: green;
 48 }
 49 
 50 .box {
 51   border-top: 1px solid red;
 52   border-bottom: 1px solid green;
 53 }
 54 
 55 .clearfix:before, .clearfix:after {
 56   content: "";
 57   display: table;
 58 }
 59 .clearfix:after {
 60   clear: both;
 61   overflow: hidden;
 62 }
 63 
 64 button {
 65   -webkit-border-radius: 5px;
 66   border-radius: 5px;
 67 }
 68 
 69 .box {
 70   -webkit-border-radius: 3px;
 71   border-radius: 3px;
 72 }
 73 
 74 .btn, .btn-primary, .btn-second {
 75   -webkit-border-radius: 5px;
 76   border-radius: 5px;
 77 }
 78 
 79 .box {
 80   -webkit-border-radius: 50%;
 81   border-radius: 50%;
 82 }
 83 
 84 .box {
 85   -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
 86   box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
 87 }
 88 
 89 .box-center {
 90   width: 500px;
 91   height: 300px;
 92   position: absolute;
 93   top: 50%;
 94   left: 50%;
 95   margin-top: -150px;
 96   margin-left: -250px;
 97 }
 98 
 99 .btn, .btn-primary, .btn-second {
100   border: 1px solid #ccc;
101   padding: 6px 10px;
102   font-size: 14px;
103 }
104 
105 .btn-primary {
106   background-color: #f36;
107   color: #fff;
108 }
109 
110 .btn-second {
111   background-color: orange;
112   color: #fff;
113 }
114 
115 .btn, .btn-primary, .btn-second, .block {
116   margin-top: 5px;
117 }
118 
119 .btn, .btn-primary, .btn-second, .block span {
120   padding-top: 5px;
121 }
122 
123 .login-box {
124   margin-top: 14px;
125   padding-top: 14px;
126 }
127 
128 .header-text-small {
129   font-size: 12px;
130 }
131 
132 .header-text-medium {
133   font-size: 20px;
134 }
135 
136 .header-text-big {
137   font-size: 40px;
138 }
139 
140 /*# sourceMappingURL=index.css.map */