看慕课网materliu前辈的sass教程,http://www.imooc.com/learn/364。顺便把刚做完的项目重构一下,然后把一些笔记和心得都写在这里~ 首先安装sass,这里直接参考 大漠前辈的安装教程 http://www.w3cplus.com/sass ...
看慕课网materliu前辈的sass教程,http://www.imooc.com/learn/364。顺便把刚做完的项目重构一下,然后把一些笔记和心得都写在这里~
首先安装sass,这里直接参考 大漠前辈的安装教程 http://www.w3cplus.com/sassguide/install.html。
然后安装compass, 在ruby command 里面打命令,gem install compass 就好了;就现阶段来说,对compass理解的不是很多,看完sass那个视频之后就觉得暂时只是用来编译scss文件和压缩css(雾)。
compass指令:
compass create compass;
compass watch;
sass语法:
当文件不用编译的时候,可以用_前缀下划线来标记然后命名,通常函数或者变量都放在一个文件夹里面。
文件引进来可以用import ,文件名后缀可以不用写, 然而这个不是css原生的import。
css原生的import两大弊端:1、一定要放在代码最前面。2、对性能不利。如果真的要使用原生的import,那么就要:1、以css结尾的时候。2、http://开头。3、URL()函数。4、带有media queries。
sass变量:好东西,譬如每次找颜色的时候,颜色代码都记不住,如果用变量的话就不用这么慢慢找颜色代码了,直接看一下变量文件,一目了然咯。
特殊变量,在特定情况下使用的变量;
eg:
//普通变量及其使用$common-ff :"微软雅黑"; //字体设置body{ font-family: $common-ff;}//css输出----body{ font-family: "微软雅黑";}//特殊变量$direction: top;//应用于class和属性.border-#{$direction}{ border-#{$direction}:1px solid #ccc;}//应用于特殊属性同理
原标题:Sass初使用
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。