看慕课网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初使用的更多相关文章

  1. SASS初体验

    SASS初体验 标签(空格分隔): sass scss css 1. 编译环境 需要安装Ruby,之后需要打开Start Command Prompt with Ruby运行 gem install ...

  2. Sass初入门

    什么是CSS预处理器? CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.   什 ...

  3. 安装Sass的一些注意事项

    文章的内容都来自网络: 1. RubyGems 镜像 2.  compass watch,我们的Sass种如果出现了中文, 就会出现编译错误,我们需要: 找到ruby的安装目录,里面也有sass模块, ...

  4. sass 安装与使用

    1.安装. 安装ruby :http://rubyinstaller.org/downloads 创建项目:在f盘创建一个名为sass的文件夹 ruby命令行:f: ruby命令行:cd sass r ...

  5. Taro开发微信小程序的初体验

    了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...

  6. ionicframework I ------------- 初体验

    ionicframework I -------------  初体验 Create hybrid mobile apps with the web technologies you love. Fr ...

  7. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  8. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  9. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

随机推荐

  1. .NET平台机器学习资源汇总,有你想要的么?

    接触机器学习1年多了,由于只会用C#堆代码,所以只关注.NET平台的资源,一边积累,一边收集,一边学习,所以在本站第101篇博客到来之际,分享给大家.部分用过的 ,会有稍微详细点的说明,其他没用过的, ...

  2. jQuery之empty、remove、detach

    三者都有把元素移除的作用,但细微的差别,造就了它们的使命不同. 最权威的解释当然是jQuery_API咯,下面是API中关于他三儿的部分截取. 一.empty: This method removes ...

  3. 从零开始编写自己的C#框架(9)——数据库设计与创建

    对于千万级与百万级数据库设计是有所区别的,由于本项目是基于中小型软件开发框架来设计,记录量相对会比较少,所以数据库设计时考虑的角度是:与开发相结合:空间换性能:空间换开发效率:减少null异常.... ...

  4. [C#]浅析ref、out参数

    转载:http://www.cnblogs.com/vd630/p/4601919.html#top 按引用传递的参数算是C#与很多其他语言相比的一大特色,想要深入理解这一概念应该说不是一件容易的事, ...

  5. 修正IE6不支持position:fixed的bug(转)

    众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6— ...

  6. 实验记录:Oracle redo logfile的resize过程

    实验记录:Oracle redo logfile的resize过程. 实验环境:RHEL 6.4 + Oracle 11.2.0.3 单实例 文件系统 实验目的:本实验是修改redo logfile的 ...

  7. 一种C#生成符合Java规则的二进制文件方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.一个项目中的真实问题 实际项目中,本想通过C#制作小工具生成SHP ...

  8. 做一个会使用PS的前端开发

    做前端开发的需不需要PS 记得在之前的老东家做某一个系统开发,当时正在做界面开发,发现界面还需要添加几个图标,于是把这个需求反馈给了项目经理.过了十几分钟,项目经理跑过来告诉我:产品部的UI设计人员( ...

  9. cookie设置保存用户名,填入中文名之后出现的错误500问题

    对于问题发生的原因以后再来补充: 解决方法就是在dologin.jsp当中使用URLEncode工具类,这个工具类在java的net包当中 <一>用户浏览器-->jsp  的过程 1 ...

  10. 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言

    1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片. ...