首页 > 代码库 > SCSS - HelloWorld
SCSS - HelloWorld
【LJ?Dragon】鱼对水说你看不到我的眼泪,因为我在水里。水说我能感觉到你的眼泪,因为你在我心里。
【LJ?Dragon】You’re more than a shadow, I’ve just to believe.
【LJ?Dragon】A true friend is some one who reaches for your hand and touches your heart.
简介
官网: http://www.sass.hk/guide/
参考: http://www.w3cplus.com/blog/tags/368.html
SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。
通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。
SCSS即是SASS的新语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS。
在SCSS中使用变量
For Example
$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;}
SCSS - HelloWorld
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。