ITKeyword,专注技术干货聚合推荐

注册 | 登录

sass学习(入门篇)

macanfa 分享于 2016-06-23

2018阿里云全部产品优惠券(新购或升级都可以使用,强烈推荐)
领取地址https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=gh9qh5ki&utm_source=gh9qh5ki

sass的环境安装:

sass需要基于Ruby的环境,故先要进行Ruby的安装:

官网:http://rubyinstaller.org/downloads/

官网

Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby。在安装过程中,个人建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况),如下图所示:

Ruby安装

Ruby 安装完成后,在开始菜单中找到新安装的 Ruby,并启动 Ruby 的 Command 控制面板,如下图所示:

Ruby安装成功界面

在安装完ruby环境后,就可以安装sass了!

你的电脑中安装好 Ruby 之后,接下来就可以安装 Sass 了。同样的在windows下安装 Sass 有多种方法。但这几种方法都是非常的简单,只需要在你的命令终端输入一行命令即可。

这里选择比较简便的方法:通过命令安装sass:
gem install sass
然后通过执行sass -v出现版本号则说明安装成功!

sass安装成功

sass和scss的关系:

Sass 语法是 Sass 的最初语法格式(缩进规则),他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本,其文件名以“.sass”为扩展名。

注:这种语法格式对于前端人员都不太容易接受,而且容易出错。

SCSS 是 Sass 的新语法格式(类似 CSS 语法格式),从外形上来判断他和 CSS 长得几乎是一模一样,代码都包裹在一对大括号里,并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。

sass和scss:不同的是其书写格式和文件扩展名不同。默认用scss语法进行开发!

sass的编译(3种)

  1. 命令编译
  2. GUI工具编译
  3. 自动化编译

1.命令编译:指使用在命令终端中,通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。(分单文件和多文件编译)

单文件编译sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

单文件编译

多文件编译:sass sass/:css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,并且将这些 CSS 文件都放在项目中“css”文件夹中。

缺点:只能一次性编译,操作麻烦。可以通过开启”watch”功能,自动检测代码的变化,实时编译。

sass中watch功能

2.GUI工具编译::通过GUI工具软件编译,直观方便!

Koala:http://koala-app.com/

3.自动化编译:使用grunt或者gulp来自动化编译sass。具体配置方法自行学习前端自动化的知识。

//Gulp 配置 Sass 编译的示例代码:
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
    gulp.watch('scss/*.scss', ['sass']);
});

gulp.task('default', ['sass','watch']);

sass常见的编译错误:

  1. 字符编译问题,不支持“GBK”编码,需要将文件编码设置为”utf-8”
  2. 路径中的中文字符引起,项目中文件命名或者文件目录命名不要使用中文字符。(血的教训啊。。。。。)

sass中四种样式风格的输出方式:

  1. 嵌套输出方式 nested
  2. 展开输出方式 expanded
  3. 紧凑输出方式 compact
  4. 压缩输出方式 compressed

源码:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

1.嵌套输出:

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

注意:在编译的时候带上参数“ - -style nested”:

sass –watch test.scss:test.css - -style nested

2.展开输出:(相比嵌套输出,右括号另起一行)

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

注意:在编译的时候带上参数“ - -style expanded”:

sass –watch test.scss:test.css - -style expanded

3.紧凑输出:

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

注意:在编译的时候带上参数“ - -style compact”:

sass –watch test.scss:test.css - -style compact

4.压缩输出:

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

注意:在编译的时候带上参数“ - -style compressed”:

sass –watch test.scss:test.css - -style compressed

以上四种风格,你喜欢就好,用得开心就好。

sass的调试:

具体看博文:http://my.oschina.net/w3cplus/blog/149720

sass的简单入门,看似简单,实则需要好好领悟!渣油

sass的环境安装: sass需要基于Ruby的环境,故先要进行Ruby的安装: 官网:http://rubyinstaller.org/downloads/ Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby。在安装过程中,
在线网页数据采集器

相关阅读排行


用户评论

游客

在线网页数据采集器

相关内容推荐

vivo京东自营官方旗舰店

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。