跳至正文

.scss是什么文件,scss是什么文件

SCSS 有那些优势,是否可以全面取代CSS

SCSS 有那些优势,是否可以全面取代CSS

怎么可能取代css,这些甜甜圈的最终都是解析还原成css的。

举个简单例子,比如我用php或js做了个css语法糖,里面你可以这样写:

#test1 to 3{fn:12px;}

你把文件保存为*.ecss,然后我写的程序遇到ecss后缀文件就会去处理成:

#test1{font-size:12px;}

#test2{font-size:12px;}

#test3{font-size:12px;}

最终把上面3行标准的css语法返回给浏览器。

优势也没多大,就是写的时候能省些事,用这些玩意坏处也多,首先是你网站比直接用css多一个解析还原的过程,不管你把这个放在后台还是前台完成都会多耗费点时间。第二,一个语法糖的学习成本是存在的,如果不是有专门规范的团队集团使用的话,比如你不会,你去接手一个别个用这个玩意写的项目,维护就很不方便,同理你会,你写的项目别人再接手也很烦的。

另外据老外的文章说w3c也在参考这些语法糖的优势,下一个版本的css原生的会自带很多类似的功能。

hbuild怎么引用scss文件

hbuild怎么引用scss文件

Sass的安装:

1.安装:SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。

假定你已经安装好了Ruby,接着在命令行输入下面的命令:

gem install sass

然后,就可以使用了。

2:使用:

SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。SASS提供两种编译方式,一种是手动编译,一种是监视编译(–watch),手动编译就是当你撰写好CSS时下指令去做编译,监视编译则是你指令一个目录,当此目录里面的*.scss档案有改变时(新增、覆写等等),就会自动去做编译的动作。先来讲手动编译方式:

下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为test。)

sass test.scss

如果要将显示结果保存成文件,后面再跟一个.css文件名。

sass test.scss test.css

SASS提供四个编译风格的选项:

* nested:嵌套缩进的css代码,它是默认值。

* expanded:没有缩进的、扩展的css代码。

* compact:简洁格式的css代码。

* compressed:压缩后的css代码。

生产环境当中,一般使用最后一个选项。

sass –style compressed test.sass test.css

还有一种监视的方式做编译,在命令行中切换到当前sass或者scss文件所在的目录,然后运行

sass –watch scss:css

SASS的官方网站,提供了一个在线转换器。你可以在那里,试运行下面的各种例子。

Compass的安装:

1.安装:安装ruby之后,输入命令

gem install compass

2.使用:创建一个 COMPASS 项目

在命令行中切换到你需要创建项目的目录,运行:

compass create “projectname”

这个命令会创建一个包含一系列文件的目录,其中最重要的是配置文件 config.rb,其他文件如果你不需要都可以删除。

在 config.rb 中你可以修改 SASS 和 CSS 的目录及其它一些基础设置。

实时编译 SASS 文件

COMPASS 提供的默认方法是:

在命令行下切换到项目目录,运行

compass watch

COMPASS 将会实时监控 SASS 目录的文件变化,只要你一保存文件,立即将相应文件编译为 CSS 文件。

如何在webpack+vue.js下配置使用scss

如何在webpack+vue.js下配置使用scss

//在项目下,运行下列命令行

npm install –save-dev sass-loader

//因为sass-loader依赖于node-sass,所以还要安装node-sass

npm install –save-dev node-sass

//解析.scss文件,对于用 import 或 require 引入的sass文件进行加载,以及

声明的内部样式进行加载

{

test: /\.scss$/,

loader: ExtractTextPlugin.extract(“style”, ‘css!sass’) //这里用了样式分离出来的插件,如果不想分离出来,可以直接这样写 loader:’style!css!sass’