scss
2015-07-20 00:44
519 查看
scss
SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。在SCSS中使用变量
$blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }
转换成CSS如下:
/* CSS */ .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; }
SCSS嵌套:
table.hl { margin: 2em 0; td.ln { text-align: right; } } li { font: { family: serif; weight: bold; size: 1.2em; } }
转换成CSS如下:
/* CSS */ table.hl { margin: 2em 0; } table.hl td.ln { text-align: right; } li { font-family: serif; font-weight: bold; font-size: 1.2em; }
使用@mixin命令,定义一个代码块。
@mixin left { float: left; margin-left: 10px; }
使用@include命令,调用这个mixin。
div { @include left; }
循环语句
SASS支持for循环:
@for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; } }
也支持while循环:
$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }
each命令,作用与for类似:
@each $member in a, b, c, d { .#{$member} { background-image: url("/image/#{$member}.jpg"); } }
循环语句
SASS支持for循环:
@for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; } }
也支持while循环:
$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }
each命令,作用与for类似:
@each $member in a, b, c, d { .#{$member} { background-image: url("/image/#{$member}.jpg"); } }
相关文章推荐
- CSS组件化思考
- 【CSS3】 - 初识CSS3
- CSS的几款流行预处理器
- css 垂直外边距重叠
- 讨论CSS的绝对定位与相对定位
- 访问jsp页面 css没被加载
- Web前端开发基础 第四课(CSS文字和段落排版)
- Web前端开发基础 第四课(CSS一些性质)
- CSS3总结
- css样式float造成的浮动“塌陷”问题的解决办法
- animate.css
- Web前端开发基础 第四课(认识CSS样式)
- 关于CSS和CSS3中一些注意事项1
- CSS小结
- CSS的margin塌陷(collapse)
- css字体颜色动画
- 《开源分享1》:前端开发必备《Html-CSS中文手册》
- CSS实实现几何图形
- css之Sass
- css命令