可能刚开始我们学习前端的时候都习惯用html+css。来做网页,但是我们发现css有很多重复的代码或者是你要改里面的图片或者文字还有去诶个的找很麻烦,所以我们就用sass来简化它。

首先我们需要安装一个koala软件它是编译asaa代码来生成css代码,刚开始我坐起来很不习惯,但是它确实方便了很多,也提高了你做网页的效率。

sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错。

列:body

background: #eee

font-size:12px

p

background: #0982c1

//文件后缀名为scss的语法

body

{ background: #eee; font-size:12px;

}

p

{ background: #0982c1;

}

!defanlt 默认值,在外面可以随便改变这个默认值
可以任何地方加上变量需要加上#号{}号为特殊变量

多值变量,可以1个变量多个值
列:$num:1px 2px 3px 4px
    margin:nth($num,1);
nth作用域(根据你的下标值获取某个元素)

嵌套(Nesting)
sass的嵌套包括两种:一种是选择器的嵌套;另一种是属性的嵌套。一般说起或用到的都是选择器的嵌套。

混合(mixin)
sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include来调用。

继承
sass中,选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。使用选择器的继承,要使用关键词@extend,后面紧跟需要继承的选择器。

for循环
for循环有两种形式,分别为:@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。

当然这几个只是我说的几个方法而已,他还有很多方法,这几个是我们最常用的。可以测试一下

sass用法的更多相关文章

  1. SASS用法指南-转

    作者: 阮一峰  日期: 2012年6月19日  原文地址:http://www.ruanyifeng.com/blog/2012/06/sass.html 艹,没想到sass 2012年就有了.现在 ...

  2. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

  3. [转]SASS用法指南

    [转]SASS用法指南 转自阮一峰 SASS用法指南 一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了 ...

  4. SASS用法入门

    本文参考了 阮一峰 老师对 SASS 用法的讲解. 学过 CSS 的人都知道,它不是一种编程语言,在日常的开发中,经常要写大量的 css 代码,有很多的重复代码,效率很低.Sass 是一个 CSS 的 ...

  5. Sass用法指南

    写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...

  6. Sass用法指南_20151109笔记

    写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...

  7. scss初学小结(转阮一峰老师SASS用法指南http://www.ruanyifeng.com/blog/2012/06/sass.html)

    1.安装 SASS是Ruby语言写的,但是两者的语法没有关系.不懂Ruby,照样使用.只是必须先安装Ruby,然后再安装SASS. 假定你已经安装好了Ruby,接着在命令行输入下面的命令: gem i ...

  8. sass用法总结(持续更新中)

    官网:https://www.sass.hk/ 1,嵌套规则 1.1普通嵌套:Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器 1.2父选择器 &: ...

  9. sass用法快速入门

    1.@mixin用法 (混合样式)    2.定义变量用$  (可作为全局变量使用) 命名规范 —— 遵守语义化命名:lg-大号.md-中号.base-基本号.sm-小号.mini-超小号 $font ...

随机推荐

  1. Netbeans代码配色主题大搜集

    我用netbeans的原因之一就是因为其支持代码配色主题,这是个对于一个代码配色字体控来说是非常重要的一个功能.理所当然的,我也会收集各种配色主题来时常换换口味. 下面就是我目前收集的Netbeans ...

  2. hdoj 1047 Integer Inquiry

    Integer Inquiry Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  3. 数字集成电路设计-8-一个简单sobel图像边缘检测加速器的设计,实现,仿真与综合

    引言 图像视频处理等多媒体领域是FPGA应用的最主要的方面之一,边缘检测是图像处理和计算机视觉中的基本问题,所以也是最常用的,随着数据量的不断增加以及对实时性的要求,一般软件已经不能满足实际需要,这时 ...

  4. N对括号的合法组合

    递归实现,需要注意以下几点: 1. 递归终止条件 2. 递归递推关系式 这里实际上是一个排列问题,只是排列需要满足条件在每一次递归调用时左括号数不能少于右括号数. 还有一点需要特别注意,当推出递归调用 ...

  5. dp hdu-4433 locker

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4433 题目大意: 给两个长度相等的数字串s1,s2.每次操作可以把连续的最多三位都+1或-1,如果超 ...

  6. 推荐一个markdown编辑器-Haroopad

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:推荐一个markdown编辑器-Haroopad.

  7. 如何在google test中指定只运行一部分测试

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何在google test中指定只运行一部分测试.

  8. 用APK Downloader直接从Google Play上下载apk

    APK Downloader可以直接从Google Play上下载apk,相比较其他软件,这个不需要提供Google ID,对于没有刷机的同学还是有些帮助的.

  9. Android 获取运营商信息(完整版)-解决高通,MTK等双卡问题

    由于国内的运营商问题,双卡手机获取IMSI号问题要根据厂商API 来实现. 下面我们就来做一套完整的分析运营商获取IMSI号逻辑. 1,首先我们要判断手机的平台. 1.1,判断手机是否MTK平台 1 ...

  10. iOS网络层架构设计分享

    前言 前些天帮公司做了网络层的重构,当时就想做好了就分享给大家,后来接着做了新版本的需求,现在才有时间整理一下. 之前的网络层使用的是直接拖拽导入项目的方式导入了AF,然后还修改了大量的源码,时隔2年 ...