SASS

2017-03-20 04:42:24

sass

安装

  • install ruby
  • sudo gem install sass

申明变量

$value = 100px;
$color = #fafafa;

编译

sass style.scss style.css

编译风格

* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
sass --style compressed style.scss build.css  

监听文件

// watch a file
sass --watch input.scss:output.css  
// watch a directory
sass --watch app/sass:public/stylesheets  

基本用法

直接使用变量

$color:#fafafa;
.div{
    background:$color;
}

变量嵌套在字符串中,需要写在#{}

$side:left,
.border{
    border-#{$side}-color:$color;
}

计算功能

//除法需要加括号
margin:(14px/2); //7px  
left:15px + 14; //29px  
width:$var * (1/3) * 1%; //33.3%  

嵌套

  • 选择器嵌套
.container{
    header{
        height:30px;
    }
    footer{
        display:block;
    }
}
  • 属性嵌套
p{  
    border:{//border后需加冒号
        width:2px;
        style:solid;
        color:$var;
    }
}

代码复用

  • 继承
.div1{
    width:20px;
    height:30px;
}
.div2{
    @extend .div1;
    background:#fafafa;
}
  • Mixin
@mixin border{
    border-left:1px solid #233;
}
#box{
    @include border;
}

传递参数
@mixin size($height:30px){
    display:inline-block;
    height:$height;
    width:100px;
}
#box{
    @include size(50px);
}

导入外部文件

@import "path/style.scss"
@import "path/main.css"

条件语句

div{  
    @if 1<2 {
        width:100%;
    }
    @if 1>5 {
        width:50%;
    }
}
main{  
    @if $width>100{
        height:50px;
    }@else{
        height:20px;
    }
}

循环语句

  • for
@for $i from 1 to 10{
    .box-#{ $i }{
        border:#{$i}px solid blue;
    }
}
  • while
$i: 6;
@while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 1;
}
  • each
@each $item in left,right,top,bottom{
    .box{
        border-#{$item}:1px solid #333;
    }
}

自定义函数

@function setWidth($width:100px){
    @return $width*2
}
.box{
    width:setWidth(20px);
}
2016总结

2016 过去的这一年,算是一个转折点吧,学生时代的终结,开始工作了。毕业后的几个月,也会经常想起上学时的很多美好,日常用语也多了句“我在学校的时候...”,我想所有刚离校的同学有共感,毕竟伴随了16年的读书模式要转换了,虽然在学校时也会出去做外包,去实习,但当全职工作后还是很回念学生时代。 说是16年的年度总结,其实多半是下半年的一些变化。以前我觉得总结什么的,都是给别人看的,形式主义。但工作的半年我转变了自己的看法,我尝试在工作的每周、每月梳理下,在每个时间段内,自己学到的新东西以及欠缺的东西,这样就有一种看着自己不断成长的感觉。不然你可能只是觉得自己好像增长了,好像有些问题被人诟病,但有不明确的知道哪些点增长了,哪些还在拖后腿。 既然是贴着程序猿的标签,那年度总结就分为生活和技术两部分吧: 生活 虽然学的是自动化专业,但是转战互联网其实从大二就开始了,虽然家里人都希望去稳定的国企,但他们也尊重我的选择,所以毕业后之久投身IT行业有惊无险。前半年的毕业找工作期也是经历了很多波折,换了好几个offer。。虽然一波三折,但是吃一堑长一智,记得任何时候都有必要签书面合同!!!不要因为对方是熟人而口头承诺!!!这是对自己的基本保障。 get 自己理发技能,从6月份开始远离理发店,到目前已经半年时间自行理发了,虽然插曲不断,总归做了件自己一直想做的事~

基于express的复杂应用——代码结构分层

项目之初,我一般选择用 express 的脚手架工具 express-generator 生成目录结构,比较快捷,生成的文件结构也比较直观。 npm install express-generator -g // 全局安装 express -e myapp // 创建工程,生成目录,使用ejs作为模板语言 生成的目录结构如下: ├── app.js ├── bin │ └── www ├── package.json ├── public │ ├── images │ ├── javascripts │ └── stylesheets ├── routes │ ├── index.js │ └── users.js └── views ├── error.ejs ├── index.ejs └── layout.ejs app.js 作为入口文件 public 存放静态资源 routes 存放路由文件 views