sass学习总结
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学习总结的更多相关文章
- Sass学习笔记(补充)
阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...
- Sass学习第一天
Sass学习 网站学习地址: Sass中文网:https://www.sass.hk/docs/#t7-3 Airen的博客:https://www.w3cplus.com/preprocessor/ ...
- Sass学习笔记之入门篇
Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...
- gulp + webpack + sass 学习
笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...
- sass学习笔记1
less在处理CSS动画时,非常恶心,决定转向sass了.sass诞生得比less早,只是因为它是ruby写的,因此受众面够少.但我们不需要自己下编译器或使用命令行,我们可以koala这神器 首先几个 ...
- sass学习(2)——关于变量
定义一个sass变量 可以说,变量是一个编程语言的基础.所以对于sass来说,变量肯定是浓墨重彩的其中一笔,当然函数也是.那我们如何声明定义一个sass的变量呢? 变量的符号$ 变量名称 变量的值 那 ...
- sass学习(1)——了解sass
为什么要选择sass 我们在手写css中,会遇到很多很麻烦的问题.倒不是一些技术的问题,而是工程量的问题.例如,如何可以代替难记的16进制颜色,如何可以让层次更清晰,还有重复的代码该如何偷懒.其实这一 ...
- sass 学习
本来看了阮一峰和于江水两位老师的博客,有看了ionic自带的sass文件,原以为自己已经是很熟悉,精通了.可是我居然连ruby都不知道真实惭愧啊,辛亏看了www.sass.hk 我想这篇官方文档肯定 ...
- 菜鸟的 Sass 学习笔记
介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade C ...
- SASS学习笔记!(持续学习中..)
工具 : koala 学习网址 : http://www.w3cplus.com/sassguide/syntax.html http://sass-lang.com/documentation/ ...
随机推荐
- webpack常用配置总结
1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...
- Hadoop HA高可用性架构和演进分析(转)
1.概况 截至目前,Apache Hadoop版本分为两代,我们将第一代Hadoop称为Hadoop 1.0,第二代Hadoop称为Hadoop 2.0.前者主要有如下几种实现方式:1)社区版本基于S ...
- C# 委托&事件
之前关于事件这块理解一直不是很好,正好有空复习,整理记录一下 委托:可以将与自身形式相同(返回参数相同:传入参数相同)的方法当成参数进行传递. using UnityEngine; using Sys ...
- 两种方式testng dataprovider结合csv做测试驱动
方式一: 第一.读取csv数据源码 import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream ...
- 我的基于asp.net mvc5 +mysql+dapper+easyui 的Web开发框架(0)
前些日子工作不太忙,自己开发了一个web框架用于以后快速开发,现在分享出来. 系统没有使用各种复杂的东西,也没有太多的层次,有兴趣的可以研究一下.
- 注解 @RequestParam,@RequestHeader,@CookieValue,Pojo,servlet原生API
1.@RequestParam 我们的超链接:<a href="springMvc/testRequestParam">testRequestParam</a&g ...
- 使用Packet Sniffer抓包和分析(z-stack协议)
以下内容仅是自己学习总结,可能会有错误,有发现问题的欢迎指正(图片可以自己放大,还是比较清晰的). 1.协调器上电,其他设备均不上电,抓包如下: 通过观察可以发现,协调器建立网络成功后,会以15秒为周 ...
- C# 单例模式
饿汉, 懒汉模式就不说了,下面是IODH模式 static void Main(string[] args) { Singleton s1, s2; s1 = Singleton.getInstanc ...
- orcal 操作
清空表数据(不清除表结构): truncate table 表名
- 安装了VS2012 还有Update4 我的Silverlight5安装完后 我的Silverlight4项目打不开
安装了VS2012 还有Update4 我的Silverlight5安装完后 我的Silverlight4项目打不开 求助 不知道是哪里出问题了 我的Silverlihgt4项目一直报错 无法打开 ...