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. JS多线程(web work)

    JS多线程JS多线程不允许操作DOM 1. 引用Concurrent Thread.js库用法:Concurrent.Thread.Create(function(){};) 2. Web Workh ...

  2. Java基础学习(三)

    /* java中的八种基本数据类型: 整数: byte . short . int . long 小数: float double 字符: char 布尔: boolean 字符串的类型: Strin ...

  3. js对象克隆方法

    方法1: function clone(obj){ var o; switch(typeof obj){ case 'undefined': break; case 'string' : o = ob ...

  4. VS2015 编译 Qwt6.1.3

    VS2015 + Qt5.7 编译 Qwt6.1.3 1. 将 qwtconfig.pri 中的 C:\Qwt 改为  D:/ProgramFiles/C_Library/Qwt/Qwt , 我的Qw ...

  5. Esri的开源JS项目杂谈

    一提到Esri大家首先想到的是庞大的ArcGIS产品大家族,其产品包含从桌面端,到服务器/云端,再到web/移动端.作为一名极客,不聊开源逼格似乎上不去啊.其实,Esri作为一个开放的平台,不仅有稳定 ...

  6. 微信测试服务器验证sha1加密法,工具类

    1 package org.fc.Util; import java.security.MessageDigest; import java.security.NoSuchAlgorithmExcep ...

  7. cocoapods导入shareSDK分享实现

    这个在官方文档没有说这两个库是必须导入的,但是不导入是会有错误的 pod 'ShareSDK3/ShareSDKConfigurationFile' pod 'ShareSDK3/ShareSDKEx ...

  8. 在公司里面,如何让笔记本连上wifi?

    1.复制谷歌浏览器图标的快捷方式,重命名为chrome Android,鼠标右键设置该快捷方式的属性,在目标处,加上 C:\Users\admin\AppData\Local\Google\Chrom ...

  9. centos 6.5 yum安装 mysql 5.6

    1. 查看系统里面有没有mysql 的repo   yum repolist all | grep mysql 2. 如果没有发现,则需要配置repo 注意,如果要使用5.7 或者其他任何版本,只能有 ...

  10. 转载:移动web开发规范

    本文来源:http://blog.csdn.net/joueu/article/details/44329825 以下是规范建议,均是日常在开发当中的的一些经验,仅供参考. 移动web开发规范 一.头 ...