SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。个人简单总结了下比较常用的的一些东西。

$ 开头定义变量名 是个全局变量   在{ $name } 局部变量

&代表父级 a{ &:hover{} } a{} a:hover{}

.a{ .b,.c,.d{} } .a .b,.a .c,.a ,d{} 群组

.a,.b{ a{}}  .a a,.b a{}   群组

.a{ border : { style:solid;width:1px;color:#ccc } }  属性嵌套 ‘:’ 必写

@at-root 在嵌套里标记用的 生成出来css是独立的 跳出嵌套

_aa.scss 一般为 局部文件 其实 @import 引入的时候 _可以不写

$aa:10 !default  !default设置默认值

@mixin 混合器 @include 调用

布尔值  and(与)\or(或)\not(非)

comparable($numver-1,$numver-2) 判断是否能相加 返回 布尔值 true/false

unit($numver) 判断 $numver 的单位

unitless($numver) 判断数值是否有单位 返回布尔值 没有单位是 true 反之 false

type-of($value) 返回类型 类似于js typeof

@function @return  必须要有返回值

#{...} 插值

@for $i from 1 to 5 \ @for $i from 1 through 5 前者是到4不到5 后者循环到5

@for $i from $strat through $end  开始结束如果是 strat 大就从小到大 反之亦然

@if 判断条件{}@else{} 判断

@include a($a:10,$b:20) 可以传类似于json的值

sass学习总结的更多相关文章

  1. Sass学习笔记(补充)

    阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...

  2. Sass学习第一天

    Sass学习 网站学习地址: Sass中文网:https://www.sass.hk/docs/#t7-3 Airen的博客:https://www.w3cplus.com/preprocessor/ ...

  3. Sass学习笔记之入门篇

    Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...

  4. gulp + webpack + sass 学习

    笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...

  5. sass学习笔记1

    less在处理CSS动画时,非常恶心,决定转向sass了.sass诞生得比less早,只是因为它是ruby写的,因此受众面够少.但我们不需要自己下编译器或使用命令行,我们可以koala这神器 首先几个 ...

  6. sass学习(2)——关于变量

    定义一个sass变量 可以说,变量是一个编程语言的基础.所以对于sass来说,变量肯定是浓墨重彩的其中一笔,当然函数也是.那我们如何声明定义一个sass的变量呢? 变量的符号$ 变量名称 变量的值 那 ...

  7. sass学习(1)——了解sass

    为什么要选择sass 我们在手写css中,会遇到很多很麻烦的问题.倒不是一些技术的问题,而是工程量的问题.例如,如何可以代替难记的16进制颜色,如何可以让层次更清晰,还有重复的代码该如何偷懒.其实这一 ...

  8. sass 学习

    本来看了阮一峰和于江水两位老师的博客,有看了ionic自带的sass文件,原以为自己已经是很熟悉,精通了.可是我居然连ruby都不知道真实惭愧啊,辛亏看了www.sass.hk  我想这篇官方文档肯定 ...

  9. 菜鸟的 Sass 学习笔记

    介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade C ...

  10. SASS学习笔记!(持续学习中..)

    工具  : koala 学习网址 : http://www.w3cplus.com/sassguide/syntax.html  http://sass-lang.com/documentation/ ...

随机推荐

  1. 表达式求值(noip2015等价表达式)

    题目大意 给一个含字母a的表达式,求n个选项中表达式跟一开始那个等价的有哪些 做法 模拟一个多项式显然难以实现那么我们高兴的找一些素数代入表达式,再随便找一个素数做模表达式求值优先级表 - ( ) + ...

  2. C#之反射

    Assembly assembly = Assembly.Load("PeopleDal"); //获取程序集名称 Module[] modules = assembly.GetM ...

  3. $stateProvider

    在你的应用中大多数状态都有与其相关联的 url,路由控制不是设计完成 state 之后的事后想法,而是开始开发时就应该考虑的问题. 这里是如何设置一个基本url. 12345 $stateProvid ...

  4. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. 两个单选按钮(一个是,一个否 ),一个div层,实现点击隐藏,显示div

    <script type="text/javascript"> function diva(){ document.getElementById('div1').sty ...

  6. Maven创建工程 WEB

    http://www.zuidaima1.com/blog/1618180875144192.htm http://www.zuidaima1.com/blog/1618162161323008.ht ...

  7. HDU 5742 Chess SG函数博弈

    Chess Problem Description   Alice and Bob are playing a special chess game on an n × 20 chessboard. ...

  8. linux 查看端口号

    在使用Linux系统的过程中,有时候会遇到端口被占用而导致服务无法启动的情况.比如HTTP使用80端口,但当启动Apache时,却发现此端口正在使用. 这种情况大多数是由于软件冲突.或者默认端口设置不 ...

  9. 动态SQL 学习

    <select id="findUser" parameterType="Map" resultType="User">     ...

  10. C# 向listbox添加大量数据项的实践心得

    使用 ListBox.Items.Add 方法添加项时,可以使用 BeginUpdate 方法,以防止每次向列表添加项时控件都重新绘制 ListBox.完成向列表添加项的任务后,调用 EndUpdat ...