学习笔记:SASS
SASS:
http://www.sass.hk/sass-course.html SASS 2015-10-10
http://sass.bootcss.com/docs/sass-reference/ Sass参考手册 2015-10-11
http://www.ruanyifeng.com/blog/2012/06/sass.html 阮一峰的SASS用法指南
sass文件后缀:1.scss
@charset "UTF-8";//这一句一定要写,否则utf8编码的文件,如果包含中文的,编译会出错
@mixin radius5 {//圆角
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.note1 {
background-color: green;
@include radius5;
}
cmd输入命令:sass 1.scss 1.css,编译结果如下:
.note1 {
background-color: green;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; }
/*# sourceMappingURL=1.css.map */
Sass的安装:
http://rubyinstaller.org/downloads 官网下载 http://dl.bintray.com/oneclick/rubyinstaller/rubyinstaller-2.2.3-x64.exe 64位的
安装过程中请注意勾选Add Ruby executables to your PATH
ruby -v
gem sources --remove https://rubygems.org/ //1.删除原gem源
gem sources -a https://ruby.taobao.org/ //2.添加国内淘宝源
gem sources -l //3.打印是否替换成功 //安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass sass -v
compass -v gem update sass //更新sass
sass -v //查看sass版本
sass -h //查看sass帮助
....
学习笔记:SASS的更多相关文章
- 学习笔记 - Sass的安装与使用手册
最近因为工作需要,自学了Sass.现在将学习笔记整理在这里,供大家参考. 1. Sass的安装 Sass的编辑器安装方法有很多,大致能分为两种:应用程序(application)和命令行界面(comm ...
- sass学习笔记 -- sass的四种编译方法
sass的四种编译方法:(.scss) (一)ruby下的命令行编译 首先需要安装ruby,注意需勾选Add Ruby executables to your PATH选项,以添加环境变量. ruby ...
- Sass学习笔记之入门篇
Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...
- Sass学习笔记(补充)
阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...
- sass个人学习笔记
Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3 ...
- Sass简单、快速上手_Sass快速入门学习笔记总结
Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...
- gulp学习笔记3
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...
- JavaScript学习笔记:数组reduce()和reduceRight()方法
很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: v ...
- stylus入门学习笔记
title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...
- Angular6 学习笔记——组件详解之组件通讯
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
随机推荐
- hadoop Non DFS Used是什么
首先我们先来了解一下Non DFS User是什么? Non DFS User的意思是:非hadoop文件系统所使用的空间,比如说本身的linux系统使用的,或者存放的其它文件 它的计算公式: n ...
- constructor&object 的对比
Constructor vs object A constructor is a special member function in the class to allocate memory to ...
- Java语法基础学习DayEighteen(常用类)
一.String类 1.特点 String代表不可变的字符序列,底层用char[]存放. String是final的. 2.内存解析 3.常用方法 int length() char charAt(i ...
- Linux下命令行cURL的10种常见用法示例
curl的命令行工具功能非常强大,这些数据交互的功能基本上都是通过URL方式进行的,下面这篇文章主要给大家分享了在Linux中命令行cURL的10种常见用法示例,通过示例代码介绍的非常详细,需要的朋友 ...
- asp.net 网页跳转的几种常用方法
Response.Redirect("http://www.baidu.com",false); 后面的bool值为是否停止执行当前页.跳转向新的页面,原窗口被代替.浏览器中的UR ...
- Spring3(一) 控制反转(IoC)和依赖注入(DI)
几个常用框架之间的关系 1 spring框架概述 1.1 什么是spring Spring是一个开源.轻量级的Java 开发框架.框架的主要优势之一就是其分层架构,分层架构允许使用者选 ...
- flask中如何生成迁移文件
在flask网站开发中,如果直接对数据库进行修改的话,风险比较高,最好的是由迁移文件生成,这样确保了数据的误操作. 在Flask中可以使用Flask-Migrate扩展,来实现数据迁移.并且集成到Fl ...
- webpack初步学习
https://segmentfault.com/a/1190000006178770 该篇文章足够webpack入门的学习了,对webpack有个初步的了解和认识.
- 公共表达式消除(UVa 12219)
紫书354页的题,将表达式树进行公共表达式消除,化为等价的图.因为需要判断某一个是否出现过,所以需要快速比较,采用哈希表的形式,将a~b与1~27一一对应,不采用0,因为0与0000是相同的,对于每一 ...
- Centos7 安装Nginx 防火墙开放80端口给外网访问
Centos7的防火墙改成了firewall,不再叫iptables,开放端口的方法如下: firewall-cmd --zone=public --add-port=80/tcp --permane ...