|
阅读：7286回复：0
sass样式工具介绍
( 以前，一直借口：自己是做开发的，又不是做美工的。所以，在网页的美化上，从来就没有去做过。
不过，这次项目。美工因为样式没做好，而被辞职了。老板让我们自己学样式，并且，要求与他的PS上的图片一模一样。老板简单的让项目经理，给我们培训了1个小时，然后，就开始了，自己写样式。 以前也写过样式，但是很少，就是字体色彩，大小之类的简单的，而且都是写在控件上的。今天写下这个日志，是要介绍下，我们项目中使用到的一个样式工具。sass的一些总结) 描述：sass 图片：3.png  Sass 安装：http://wenku.baidu.com/view/5069c9ee4afe04a1b071de2d.html Sass 简介：http://baike.baidu.com/view/4020816.htm Sass运行http://sass-lang.com/try.html Sass使用的心得：就是感觉和写程序的思想方法差不多。 你可以定义变量，多处引用，如：$input_height:23px; input{height:$input_height},这个变量定义的好处就不用说了吧。 你可以进行计算，如：$div_width:$parent_width+-$prev_width; //可以通过计算来确定长度等 还可以使用继承，如：.font_content{font-size:13px;font-color:red;},其它有需要指定相同字体和色彩时，可以@extend .font_content便可以引用了。 还有很多优点，我这就不举例了，上面有网址，去看看就知道它的特性。 安装也有说明，安装完成后，就可以写了。sass文件是scss后缀名。我们要创建scss后缀的文件，在里面编写相应的代码。 这里就有一个问题了：怎么在我们的程序中，引用我们的这个SASS文件。 其实我们不是引用SASS文件，而是SASS文件对应的CSS样式。 你可以执行以下命令：sass --watch style.scss:style.css 它会把style.scss实时的生成style.css文件。 还可以使用其它方式，这个就自己看资料扩展了。 （这里说一下快捷键：就是我们在执行上面的命令时，是在scss对应的目录下执行的，如果目录深比较麻烦，你可以在scss目录下，按住shift，右键“在此处打开命令窗口”，这样就方便多了） [sunshine于2016-06-14 23:40编辑了帖子]
|
|
公众号
