sass用法
可能刚开始我们学习前端的时候都习惯用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用法的更多相关文章
- SASS用法指南-转
作者: 阮一峰 日期: 2012年6月19日 原文地址:http://www.ruanyifeng.com/blog/2012/06/sass.html 艹,没想到sass 2012年就有了.现在 ...
- CSS预处理器之SASS用法指南
CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...
- [转]SASS用法指南
[转]SASS用法指南 转自阮一峰 SASS用法指南 一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了 ...
- SASS用法入门
本文参考了 阮一峰 老师对 SASS 用法的讲解. 学过 CSS 的人都知道,它不是一种编程语言,在日常的开发中,经常要写大量的 css 代码,有很多的重复代码,效率很低.Sass 是一个 CSS 的 ...
- Sass用法指南
写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...
- Sass用法指南_20151109笔记
写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...
- scss初学小结(转阮一峰老师SASS用法指南http://www.ruanyifeng.com/blog/2012/06/sass.html)
1.安装 SASS是Ruby语言写的,但是两者的语法没有关系.不懂Ruby,照样使用.只是必须先安装Ruby,然后再安装SASS. 假定你已经安装好了Ruby,接着在命令行输入下面的命令: gem i ...
- sass用法总结(持续更新中)
官网:https://www.sass.hk/ 1,嵌套规则 1.1普通嵌套:Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器 1.2父选择器 &: ...
- sass用法快速入门
1.@mixin用法 (混合样式) 2.定义变量用$ (可作为全局变量使用) 命名规范 —— 遵守语义化命名:lg-大号.md-中号.base-基本号.sm-小号.mini-超小号 $font ...
随机推荐
- Yii常用技巧总结
//YII framework路径 Yii::getFrameworkPath(); //protected/runtime Yii::app()->getRuntimePath(); //pr ...
- Duff and Meat - CF 588A
题目大意:有一个人他有每天需要吃ai千克肉,并且当天肉的价格是pi,问N天后他至少需要花费多少钱买肉. 分析:注意一下,他是可以提前买好肉放着的. 代码如下: #include<iostream ...
- 380. Insert Delete GetRandom O(1)
经过昨天的消沉 今天我振作了 设计个数据结构,添加,删除,随机获取都是O(1). 怎么会有这么牛逼的数据结构,所以肯定相应的要耗费空间. 添加和获取耗时O(1)是Array的特性,或者说是Map/Ta ...
- Bitbucket Pull Request和fork
本文参考了http://blog.jobbole.com/76854/ Pull Request在Forking工作流中使用,这个也同样适用于小团队的开发协作和第三方开发者向开源项目的贡献.当你要 ...
- RocketMq消息队列使用
最近在看消息队列框架 ,alibaba的RocketMQ单机支持1万以上的持久化队列,支持诸多特性, 目前RocketMQ在阿里集团被广泛应用在订单,交易,充值,流计算,消息推送,日志流式处理,bin ...
- shell查找文件并删除
-mtime 0 表示文件改动时间距离当前为0天的文件.即距离当前时间不到1天(24小时)以内的文件. -mtime 1 表示文件改动时间距离当前为1天的文件,即距离当前时间1天(24小时-48小时) ...
- netsh
NetSH (Network Shell) 是windows系统本身提供的功能强大的网络配置命令行工具. 导出配置脚本:netsh -c interface ip dump > c:\inter ...
- 重新格式化namenode后,出现java.io.IOException Incompatible clusterIDs
错误: java.io.IOException: Incompatible clusterIDs in /data/dfs/data: namenode clusterID = CID-d1448b9 ...
- Java Interview Reference Guide--reference
Part 1 http://techmytalk.com/2014/01/24/java-interview-reference-guide-part-1/ Posted on January 24, ...
- ASP.NET Web API(一):使用初探,GET和POST数据
概述 REST(Representational State Transfer表述性状态转移)而产生的REST API的讨论越来越多,微软在ASP.NET中也添加了Web API的功能 项目建立 在安 ...