Sass初使用
看慕课网materliu前辈的sass教程,http://www.imooc.com/learn/364。顺便把刚做完的项目重构一下,然后把一些笔记和心得都写在这里~
首先安装sass,这里直接参考 大漠前辈的安装教程 http://www.w3cplus.com/sassguide/install.html。
然后安装compass, 在ruby command 里面打命令,gem install compass 就好了;就现阶段来说,对compass理解的不是很多,看完sass那个视频之后就觉得暂时只是用来编译scss文件和压缩css(雾)。
compass指令:
compass create compass;
compass watch;
sass语法:
当文件不用编译的时候,可以用_前缀下划线来标记然后命名,通常函数或者变量都放在一个文件夹里面。
文件引进来可以用import ,文件名后缀可以不用写, 然而这个不是css原生的import。
css原生的import两大弊端:1、一定要放在代码最前面。2、对性能不利。如果真的要使用原生的import,那么就要:1、以css结尾的时候。2、http://开头。3、URL()函数。4、带有media queries。
sass变量:好东西,譬如每次找颜色的时候,颜色代码都记不住,如果用变量的话就不用这么慢慢找颜色代码了,直接看一下变量文件,一目了然咯。
特殊变量,在特定情况下使用的变量;
eg:
//普通变量及其使用
$common-ff :"微软雅黑"; //字体设置
body{
font-family: $common-ff;
}
//css输出----
body{
font-family: "微软雅黑";
} //特殊变量
$direction: top;
//应用于class和属性
.border-#{$direction}{
border-#{$direction}:1px solid #ccc;
}
//应用于特殊属性同理
多值变量:顾名思义就是多个值咯。譬如 0 1px 2px 3px之类的。里面的函数有很多,暂时只用过append($list,$value,[$separator]),这个函数。
mixin:通过@mixin声明,@include 调用;
以前在做项目的时候用手淘的flexible写了很多这样的样式
button,input,textarea{
font-size: 12px;
}
[data-dpr="2"] button,
[data-dpr="2"] input,
[data-dpr="2"] textarea{
font-size: 24px;
}
[data-dpr="3"] button,
[data-dpr="3"] input,
[data-dpr="3"] textarea{
font-size: 36px;
}
这样写太麻烦了,然后学了sass之后就参考手淘他们写的混合宏自己写了一个
@mixin property-dpr($property,$px-values){
//判断参数是不是单个数字,若是
@if type-of($px-values) == "number"{
#{$property}: $px-values;
[data-dpr="2"] & {
#{$property}: $px-values * 2;
}
[data-dpr="3"] & {
#{$property}: $px-values * 3;
}
}
//若为数组则
@else {
//新建两个空数组
$twodpr-values:();
$threedpr-values:();
//遍历多值变量
@each $value in $px-values{
$twodpr-values:append($twodpr-values,$value*2);
$threedpr-values:append($threedpr-values,$value*3)
}
// 返回处理后的多值变量
#{$property}: $px-values;
[data-dpr="2"] & {
#{$property}: $twodpr-values;
}
[data-dpr="3"] & {
#{$property}: $threedpr-values;
}
}
}
css、sass生成代码:
//调用mixin
div{
@include property-dpr(font-size,12px);
}
//css style
div {
font-size: 12px;
}
/* line 7, ../../sass/common/_mixin.scss */
[data-dpr="2"] div {
font-size: 24px;
}
/* line 10, ../../sass/common/_mixin.scss */
[data-dpr="3"] div {
font-size: 36px;
}
今天就先到这里咯。
Sass初使用的更多相关文章
- SASS初体验
SASS初体验 标签(空格分隔): sass scss css 1. 编译环境 需要安装Ruby,之后需要打开Start Command Prompt with Ruby运行 gem install ...
- Sass初入门
什么是CSS预处理器? CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 什 ...
- 安装Sass的一些注意事项
文章的内容都来自网络: 1. RubyGems 镜像 2. compass watch,我们的Sass种如果出现了中文, 就会出现编译错误,我们需要: 找到ruby的安装目录,里面也有sass模块, ...
- sass 安装与使用
1.安装. 安装ruby :http://rubyinstaller.org/downloads 创建项目:在f盘创建一个名为sass的文件夹 ruby命令行:f: ruby命令行:cd sass r ...
- Taro开发微信小程序的初体验
了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...
- ionicframework I ------------- 初体验
ionicframework I ------------- 初体验 Create hybrid mobile apps with the web technologies you love. Fr ...
- 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 ...
随机推荐
- 【深入浅出Linux网络编程】 “实践 -- TCP & UDP”
通过上一篇博客的学习,你应该对基于epoll的事件触发机制有所掌握,并且通过阅读sio.c/sio.h应该也学会了如何封装epoll以及如何通过设计令epoll更加实用(用户回调,用户参数). 简单回 ...
- String,StringBuffer与StringBuilder的区别??
转自http://blog.csdn.net/rmn190/article/details/1492013 String 字符串常量 StringBuffer 字符串变量(线程安全) StringBu ...
- EntityFramework之你不知道的那些事(七)
前言 前面一系列几乎都是循序渐进式的进行叙述,似乎脚步走得太快了,于是我开始歇一歇去追寻一些我所不太了解的细枝末节,在此过程中也屡次碰壁,但是唯有如此才能更好的成长,不是吗!希望此文对你亦有帮助. 属 ...
- 借助node实战WebSocket
一.WebSocket概述 WebSocket协议,是建立在TCP协议上的,而非HTTP协议. 如下: ws://127.0.0.1或wss://127.0.0.1就是WebSocket请求. 注:w ...
- 为SubSonic3.0的查询(SubSonic.Query.Select和存储过程)添加更多的执行功能
在使用SubSonic3.0的查询功能时,会发现想通过执行返回我们想要的数据,切没有相关的功能,比如说:SubSonic.Query.Select,在使用查询时没有返回DataSet或DataTabl ...
- phpstorm 63342默认端口怎么修改
phpstorm进行网页调试的时候,默认是加端口号63342,在配置本地php环境的时候默认端口不一定是63342这个,更多的是系统默认的端口号80,那么问题就出现了,如何在phpstorm中将633 ...
- 关于Java中的static关键字
Java中的 static 关键字,确实是一个关键的字(key word),今天就来总结一下它的用法,说说为什么关键. Java中的 static 关键字主要是用来做内存管理的.理解了这句话才能够比较 ...
- .net基本数据类型操作
代码编写的过程中,较多的会涉及到基本数据类型的使用和定义,在项目中,对于类型的判定和类型间的相互转换,有时也较为的麻烦,先提供几种基本数据类型的判断方法: 1.判断对象是否为Int32类型的数字: / ...
- 汽车之家一道SQL 面试题,大家闲来无事都来敲一敲
写在前面 上周去汽车之家面试,拿到这个SQL笔试题顿时感觉到有些陌生,因为好长时间不写SQL语句了,当时只写了表设计,示例数据和SQL语句都没写出来. 汽车之家应该用的SQL Server, 编程题一 ...
- android获得ImageView图片的等级
android获得ImageView图片的等级问题 要实现的功能如下图,点击分享能显示选中与不选中状态,然后发送是根据状态来实现具体分享功能. 在gridview中有5个子项,每个子元素都有两张图片A ...