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. hbase 的体系结构

    hbase的服务体系遵从的是主从结构,由HRegion(服务器)-HRegionServer(服务器集群)-HMaster(主服务器)构成, 从图中能看出多个HRegion 组成一个HRegionSe ...

  2. hive 复杂类型

    hive提供一种复合类型的数据 struct:可以使用"."来存取数据 map:可以使用键值对来存取数据 array:array中存取的数据为相同类型,其中的数据可以通过下表获取数 ...

  3. Swagger(webapi自动生成接口说明文档)

    1.引入Swagger.Net.UI和Swashbuckle包 2.卸载重复包Swagger.Net 3.多余的SwaggerUI文件夹 4.项目属性->勾选生成xml文档文件 5.添加类Swa ...

  4. 使用静态函数impl模式做接口

    使用静态函数impl模式做接口 impl即桥接模式,主要是为了隐藏数据和减少不必要的编译. 普通的impl模式做接口一般是: A类是接口,B类继承A类,是A类的实现,C类,包含A类和B类的头文件,把B ...

  5. vue-loader配合webpack的使用及安装

    vue-loader配合webpack的使用及安装: 工程文件简单的目录结构 index.html main.js   入口文件 App.vue   vue文件,官方推荐命名法 package.jso ...

  6. js获取css中的样式

    众所周知,obj.style只能够获取 <div id="a" style="width:100px;"></div> 结构上的样式 如 ...

  7. 详细讲述MySQL中的子查询操作 (来自脚本之家)

    继续做以下的前期准备工作: 新建一个测试数据库TestDB: ? 1 create database TestDB; 创建测试表table1和table2: ? 1 2 3 4 5 6 7 8 9 1 ...

  8. IIS 图片加载不出来

    如何为IIS增加svg和woff格式文件的支持 在我们新版的TopFlow中,使用了最新的bootstrap框架,此框架使用了字体文件来显示矢量的图标,为了能在IIS上正常显示图标,可以通过增加iis ...

  9. laravel 操作 redis

    laravel框架中本身已经存在相应的redis的配置我们在使用的时候只需要更改配置即可,但是在使用的时候一定要注意命名空间的问题,具体可查看config/app.php下面的aliases数组中具体 ...

  10. Python学习日志(四)

    列表 列表名 = [元素1,元素2,-] 列表和C中的数组有些相似,但列表的功能更加强大,数组的元素要求是同种类型,但列表可以是混合类型. 跟数组一样,通过元素的索引值,我们可以从列表获取单个数据. ...