sass心得
1、sass的安装:
(1)下载安装Ruby,记得安装的时候勾选第二项,
(2)打开控制面板gem install sass(人品好的话,一下子就能安装成功)
(3)如果(2)安装不成功进行一下步骤:gem sources -remove htpps://rubygems.org/
gem sources -a http://gems.ruby-china.org
gem sources -l
gem install sass
2、sass的编译
(1)下载安装koala
(2)打开koala把需要编译的整个项目文件夹直接拖进去,选择输出路径,并且可以在设置里面选择输出的编译格式,
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
3、引入sass文件
引入sass文件其实还是引入的css文件,所以需要在html页面引入编译好的css文件
4、编写sass文件
(1)在头部加入@charset"utf-8" (2)用$声明变量:css与sass的最大的区别就是sass里面可以声明变量,从而减少了代码的冗余,
声明方式:$变量名:值 ($width:40px)
调用方式:width:$width;
编译出来:width:40px; (3)不传参的混合宏 @mixin :混合宏就是将一堆经常重复使用的代码块放在一起,
声明例如:@mixin margin_style{ margin-top:20px;margin-left:30px;}
调用方式:@include margin_style
编译出来:margin-top:20px;margin-left:30px;
不足:调用混合宏编译出来的css代码不会合并,使得代码变得臃肿冗余 (4)传参的混合宏:
声明方式:@mixin margin_style($style,$value){ margin-#{style}:$vaule}
(也可以在()里面给他默认值,如果调用的时候没有给他值就是用默认值)
调用方式:@include margin_style(top,20px)
编译出来:margin-top:20px; (5)扩展/继承:如果有一个clss具有某些css样式了,但是另一个clsaa也需要这些样式,就可以继承前面的css样式
使用方法 @extend .需要继承的class
不足:如果基类,并不存在于html中时,不管调用没调用,在编译的时候都会将他的css都将产生基类对应的样式代码 (6)占位符:class中没有这个css样式,但是后面经常用到了用到了,就可以把它写成一个单独的样式里面去,然后让其他的class去继承
使用方法:%名字{}
调用方法:@extend %名字 (7)if指令:@if @else (8)for循环:
@for $i from <start> through <end>
@for $i from <start> to <end>
$i 表示变量
start 表示起始值
end 表示结束值
(这两个的区别是关键字 through 表示包括 end 这个数,而 to 则不包括 end 这个数。) (9)while循环 :while 循环条件
(10)字符串函数:
unquote($string):删除字符串中的引号;
quote($string):给字符串添加引号。
To-upper-case()将小写字母转换成大写字母
to-lower-case()将大写转换成小写 (11)引入:
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo); (12)@media:可以嵌套使用
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
(13)@extend 是用来扩展选择器或占位符
(14)@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。
(15)@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug:
(16)@warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass
(17)@error 和 @warn、@debug 功能是如出一辙。
sass心得的更多相关文章
- Brackets + Sass 学习心得
大家知道Brackets是一个可以实时浏览html页面修改效果的工具,对于前段开发人员应该不会陌生,有了它,布局页面再也不是什么困难了, 目前为止已经更新到1.6了. 下载最新版可以到官方网: htt ...
- sass 的使用心得
//定义颜色 $c55:#; $c22:#; $c33:#; $c99:#; $c77:#; $c00:#; $cff:#fff; $caa:#aaa; $ccc:#ccc; $cf0:#f0f0f0 ...
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- Sass初使用
看慕课网materliu前辈的sass教程,http://www.imooc.com/learn/364.顺便把刚做完的项目重构一下,然后把一些笔记和心得都写在这里~ 首先安装sass,这里直接参考 ...
- sass个人学习笔记
Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3 ...
- Sass带来的变革_sass, scss 教程_w3cplus - Google Chrome
Sass带来的变革 作者:大漠 日期:2014-11-17 点击:5291 sass scss 接触Sass差不多有一个年头了,在这一年来的时间中,也花了不少心思在Sass的学习上.同时也让自己喜欢上 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
随机推荐
- 腾讯QQ认证空间4月27日已全面开放申请,欲进军自媒体
今天看到卢松松的博客上爆出,腾讯QQ认证空间4月27日已全面开放申请的消息,这一消息出来, 马浩周根据提示方法进行申请,下面先说说腾讯QQ认证空间的申请方法: QQ认证空间开放申请公告地址:http: ...
- Self-Host Web API 学习笔记
ASP.NET Web API 不需要 IIS,直接使用控制台程序可以实现. 一.创建一个新的控制台程序,项目名为 HostApi 二.设置目标框架为.NET Framework 4 三.NuGet添 ...
- nginx tomcat 动静分离
所谓动静分离就是通过nginx(或apache等)来处理用户端请求的图片.html等静态的文件,tomcat(或weblogic)处理jsp.do等动态文件</span>,从而达到动静页面 ...
- selenium python的使用(一)
下面是一个爬取知网数据的例子,使用selenium 用python爬取数据 1.创建对象,打开指定地址,在休眠的20秒内输入搜索项 driver= webdriver.Chrome() driver. ...
- ThinPHP命名空间,连接数据库是要修改的配置文件,Model数据模型层,跨控制器调用,如何获取系统常量信息,
一.命名空间(主要是为了实现自动加载类) *命名空间(相当于虚拟的目录),为了让类有一个统一的文件夹来管理(可以自动加载'类'),每个文件都要有命名空间*tp如何做命名空间:*TP框架下有一个初始命名 ...
- sublime通用快捷键 汉化 安装 插件
Ctrl+Alt+P 切换项目 1.Ctrl+Shift+P 打开Package Control Ctrl + Shift + P ,输入View, 选择Toogle Tabs ...
- 谈一谈php://filter的妙用
php://filter是PHP中独有的协议,利用这个协议可以创造很多"妙用",本文说几个有意思的点,剩下的大家自己下去体会.本来本文的思路我上半年就准备拿来做XDCTF2016的 ...
- outlook2013 更改邮件文件位置
找了许多也是不行, 最后自己来多次试验,原来就是这么容易 ., 1: 先增加你的邮件账号,然后找到数据文件的位置 2: 关闭OUTLOOK 2013,把上一步中的数据文件复制到你要的位置,如D:\ou ...
- 在Update表数据同时将数据备份
分享一条有意思的SQL语句,也是前两天有个朋友在面试的时候碰到的,他当时没有做出来,回来之后问我, 如何在同一条语句中实现,更新表的时候同时备份更新前的记录数据. --在修改数据前,先要把修改前的数据 ...
- Windows下安装Python lxml库(无废话版)
python官网:python-2.7.12.amd64.msihttps://pypi.python.org/pypi/setuptools:setuptools-28.6.0.zipsetupto ...