2018-04-06 Sass入门

1. Sass和SCSS的区别

SCSS是Sass推出的一个全新的语法,更加贴近css,所以一般都是用SCSS。
请注意 Sass 从来没有大写过,无论你指的是语法或者这个语言。同时, SCSS 一直是大写的!

2. 安装(mac)

我安装的是node-sass
在命令行里进入~目录,输入:

  • npm config set registry https://registry.npm.taobao.org/
  • echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"'>> ~/.bashrc(若是用的zshrc则改为~/.zshrc)
  • source ~/.bashrc(同上)
  • sudo cnpm i -g node-sass(需要先安装cnpm)
  • mkdir ~/Desktop/scss-demo
  • cd ~/Desktop/scss-demo
  • mkdir scss css
  • touch scss/style.scss
  • node-sass style.scss style.css -w style.scss(开始监听style.scss)

3. 使用

终端进入含css和scss文件的目录,执行
node-sass style.scss style.css -w style.scss(开始监听style.scss)
直接编辑style.scss,node-scss就会自动给style.css实时更新。
在 scss 文件里添加以下内容

@function px( $px ){
  @return $px/$designWidth*10 + rem;  //js里获取innerWidth的时候除以了10,这里就要乘以10
}

$designWidth : 640; // 640是设计稿的宽度,设计师给的。

.child{
  width: px(320);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}

可看到css变化,SCSS将px变成了rem放入了css中。
若不使用SCSS的话,我们每次将px转化为rem都要自己去算,使用SCSS可以帮我们算

4. 语法

.topNavBar{
  nav{
    background: red;
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Sass&Gulp 一、sass介绍 (一) SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计...
    锋享前端阅读 5,397评论 0 3
  • Sass入门与实战 **Sass is the most mature, stable, and powerful...
    2f3abe35f5ac阅读 3,964评论 0 2
  • 手机专用的自适应方案em是个单位,一个m的宽度rem r表示root rem:根元素的font-size 页面...
    tsl1127阅读 1,657评论 0 0
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 13,845评论 0 21
  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 4,496评论 0 1