1、sass的安装:
(1)下载安装Ruby,记得安装的时候勾选第二项,
(2)打开控制面板gem install sass(人品好的话,一下子就能安装成功)
(3)如果(2)安装不成功进行一下步骤:gem sources -remove htpps://rubygems.org/
gem sources -a http://gems.ruby-china.org
gem sources -l
gem install sass
2、sass的编译
(1)下载安装koala
(2)打开koala把需要编译的整个项目文件夹直接拖进去,选择输出路径,并且可以在设置里面选择输出的编译格式,
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
3、引入sass文件
引入sass文件其实还是引入的css文件,所以需要在html页面引入编译好的css文件
4、编写sass文件
(1)在头部加入@charset"utf-8" (2)用$声明变量:css与sass的最大的区别就是sass里面可以声明变量,从而减少了代码的冗余,
声明方式:$变量名:值 ($width:40px)
调用方式:width:$width;
编译出来:width:40px; (3)不传参的混合宏 @mixin :混合宏就是将一堆经常重复使用的代码块放在一起,
声明例如:@mixin margin_style{ margin-top:20px;margin-left:30px;}
调用方式:@include margin_style
编译出来:margin-top:20px;margin-left:30px;
不足:调用混合宏编译出来的css代码不会合并,使得代码变得臃肿冗余 (4)传参的混合宏:
声明方式:@mixin margin_style($style,$value){ margin-#{style}:$vaule}
(也可以在()里面给他默认值,如果调用的时候没有给他值就是用默认值)
调用方式:@include margin_style(top,20px)
编译出来:margin-top:20px; (5)扩展/继承:如果有一个clss具有某些css样式了,但是另一个clsaa也需要这些样式,就可以继承前面的css样式
使用方法 @extend .需要继承的class
不足:如果基类,并不存在于html中时,不管调用没调用,在编译的时候都会将他的css都将产生基类对应的样式代码 (6)占位符:class中没有这个css样式,但是后面经常用到了用到了,就可以把它写成一个单独的样式里面去,然后让其他的class去继承
使用方法:%名字{}
调用方法:@extend %名字 (7)if指令:@if @else (8)for循环:
@for $i from <start> through <end>
@for $i from <start> to <end>
$i 表示变量
start 表示起始值
end 表示结束值
(这两个的区别是关键字 through 表示包括 end 这个数,而 to 则不包括 end 这个数。) (9)while循环 :while 循环条件
(10)字符串函数:
unquote($string):删除字符串中的引号;
quote($string):给字符串添加引号。
To-upper-case()将小写字母转换成大写字母
to-lower-case()将大写转换成小写 (11)引入:
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo); (12)@media:可以嵌套使用
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
(13)@extend 是用来扩展选择器或占位符
(14)@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。
(15)@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug:
(16)@warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass
(17)@error 和 @warn、@debug 功能是如出一辙。

sass心得的更多相关文章

  1. Brackets + Sass 学习心得

    大家知道Brackets是一个可以实时浏览html页面修改效果的工具,对于前段开发人员应该不会陌生,有了它,布局页面再也不是什么困难了, 目前为止已经更新到1.6了. 下载最新版可以到官方网: htt ...

  2. sass 的使用心得

    //定义颜色 $c55:#; $c22:#; $c33:#; $c99:#; $c77:#; $c00:#; $cff:#fff; $caa:#aaa; $ccc:#ccc; $cf0:#f0f0f0 ...

  3. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  4. Sass初使用

    看慕课网materliu前辈的sass教程,http://www.imooc.com/learn/364.顺便把刚做完的项目重构一下,然后把一些笔记和心得都写在这里~ 首先安装sass,这里直接参考 ...

  5. sass个人学习笔记

    Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3 ...

  6. Sass带来的变革_sass, scss 教程_w3cplus - Google Chrome

    Sass带来的变革 作者:大漠 日期:2014-11-17 点击:5291 sass scss 接触Sass差不多有一个年头了,在这一年来的时间中,也花了不少心思在Sass的学习上.同时也让自己喜欢上 ...

  7. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  8. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  9. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

随机推荐

  1. backbonejs

    前言: backbone由以下模块组成. 一.Event 监听事件,自定义事件.绑定到任何对象. http://www.css88.com/doc/backbone/#Events 这个是下面模块核心 ...

  2. jquery on 绑定事件

    jquery on 绑定事件 1. 多个选择器绑定一个事件 2. 多个事件绑定一个函数 3. 一个选择器绑定多个事件,有两种写法: 或者 on只绑定一次事件,绑定父元素,防止初始化时数据未加载,绑定出 ...

  3. inline--行内元素

    其实在网页中有看不见的基线,就像作业本上面的一行一行的线,但是我们看不见. div是块状元素,独占一行,用div控制文字的颜色会使得文字换行,使用float可以改善,但是它不会浮在相应的位置: < ...

  4. Web测试的常用测试用例与知识

    1. Web测试中关于登录的测试 2. 搜索功能测试用例设计 3. 翻页功能测试用例 4. 输入框的测试 5. Web测试的常用的检查点 6. 用户及权限管理功能常规测试方法 7. Web测试之兼容性 ...

  5. equals == 比较

    public class Equals{ public static void main(String[] args){ Interger n1=new Interger(47); Interger ...

  6. android开发中的问题总结(一)

    1.设置sdk路径 window->preferences->android->SDK location 中进行修改,如果出现红叉,就说明不正确,选择的路径必须包含tools的那个目 ...

  7. 安装eclipse的hadoop开发环境--2

    在eclipse上做好一切,在网上很容易搜到 尝试链接hadoop集群失败,尝试单机的操作,发现# ssh localhost失败 解决ssh问题:成功解决 但是eclipse的DFS locatio ...

  8. postgresql修炼之道学习笔记(1)

    好好学习吧. 本笔记 仅作为摘要记录 前两章,主要是数据库对比和安装等. 对比,就比多说了,总是和别人比较,会显得自己身价低,呵呵. 安装也有很多文章,不多说. 第二章提到了一些简单的配置, 其在 d ...

  9. c语言第2次作业

  10. nginx----------------环境搭建遇到的一些问题汇总--(多域名配置,配置文件修改问题)

    nginx的启动命令是:(通用) /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 重启命令: /usr/local/ng ...