导航:首页 > 源码编译 > 在线编译scssapi

在线编译scssapi

发布时间:2023-05-31 13:00:38

❶ 动态样式语言Scss&Less介绍与区别

一. Sass/Scss&Less是什么?
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比芹闷谈css好写,而且更容易阅读。Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css。
Less一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承罩肆,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js)。less英文站需要翻墙,也可以访问中文站
Sass与Scss有什么差别
Sass原先跟Haml一样的缩排语法,对于写惯Css的前端来说是很不直观的,也不能将原来的Css加到Sass里面,因此Sass改良了语法,Sass 3就变成了Scss(Sassy CSS)。与原来的语法兼容,只是用{}取代了原来的缩进。
二. Sass/Scss&Less区别?
1.Sass是基于Ruby的,是在服务端处理的,而Less是需要引入嫌碰less.js来处理Less代码输出Css到浏览器,也可以在开发环节使用Less,然后编译成Css文件,直接放到项目中,也有Less.app、SimpleLess、CodeKit.app这样的工具,也有在线编译地址。
2.变量符不一样,less是@,而Scss是$,而且变量的作用域也不一样,后面会讲到。
3.输出设置,Less没有输出设置,Sass提供4中输出选项:nested, compact, compressed 和 expanded。
4.Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持。

❷ react+webpack+scss 怎么编译css独立文件

处理scss文件需要 sass-loader
npm install sass-loader node-sass --save-dev
【注】 以下配置中需竖闹要用到的模块,请自行安装旅拆
extract-text-webpack-plugin
postcss-loader
precss
autoprefixer
然后在webpack.config.js文件做以下配置
/拆纤枣/css文件提取器需要的插件var ExtractTextPlugin=require('extract-text-webpack-plugin');//postcss-loader 需要的配置项var precss = require('precss');var autoprefixer = require('autoprefixer');mole.exports = { ... mole: { loaders: [ { test: /\.scss$/, loader: ExtractTextPlugin.extract('style','css!postcss-loader','sass')} ] }, postcss: function () { return [precss, autoprefixer]; }}

❸ webstorm 编译 scss 文件报错

打开webstorm创建空项目,点击“File”菜单选择“Setting”,搜索“watcher”关键字,

点击右边绿色加号,选择“SCSS”文件类型。

输入监视文件类型名称(随便写),关键第二个选项,一定要选择ruby安装目录bin文件下的scss.bat文件

最后,创建.scss文件输入scss css代码,保存后会生成后缀.css文件,就可以了。

❹ windows7怎么编译scss

Sass 是对 CSS 的扩展备铅散,让 CSS 语言更强仿氏大、优雅。 它允许你使用变量、嵌套规则激宴、 mixins、导入等众多功能, 并且完全兼容 CSS 语法:
http://jingyan..com/article/86f4a73e83654a37d752696c.html

❺ 如何安装并编译sass为css文件

Ruby安装

由于sass依赖于ruby环渣唯境,所乎裤以在安装sass之前必须安装ruby。可以去官网下载一个。网络环境不好的,可以用我提供的这个文件:点击下载

安装完成后可以在开始菜单找到ruby命令行,打开输入ruby -v查看版本号,出现版本信息则安装成功

clipboard.png-6.6kB

QQ截图20160917210342.png-1.6kB

Sass安装

安装完ruby后,可以直接在命令行里面输入gem install sass安装Sass,不过由于墙的厉害,建议使用淘宝的ruby源来安装,步骤如下:
gem sources --remove https://rubygems.org/
https://rubygems.org/ removed from sources
gem sources -a https://ruby.taobao.org/
https://ruby.taobao.org/ added to sources

这一步有可能会出错,windows下证书无法验证。
解决方法:下载证书(右键另存为即可),放到ruby安装目录下,然后再设置环境变量SSL_CERT_FILE为该文件路径,再重新输入该命令

QQ截图20160917211759.png-8.6kB

gem source -l
*** CURRENT SOURCES ***
https://ruby.taobao.org/
gem install sass
Fetching: sass-3.4.13.gem (100%)
Successfully installed sass-3.4.13
Parsing documentation for sass-3.4.13
Installing ri documentation for sass-3.4.13
Done installing documentation for sass after 12 seconds
1 gem installed

//如果你在安装时出现如下提示,岁梁简则表明网络不佳或源没有切换到 ruby.taobao.org
ERROR: Could not find a valid gem 'sass' (>= 0), here is why:
Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (
https://api.rubygems.org/latest_specs.4.8.gz)
sass -v
Sass 3.4.13 (Selective Steve)

到此,所有的安装都结束了。接下来我们就可以直接编译sass文件了

Sass编译

打开ruby命令行,切换到scss文件所在目录,执行sass style.scss style.css,就可以将style.scss文件编译成style.css文件

❻ 用compass编译sass,进入目录后执行compass watch 后然后书写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 文件。

❼ 用koala编译scss失败,出错是怎么回事

我樱饥最近也在学sass,之前用的是sublime test2,这个编译器有个好处就是转译成css的时候方便,但是终究还是和项目分离,也很麻烦。后来发现只要通过命令行一直监视整个目录或者念桥文件就方便多了,只要保存,sass就脊高返会自动编译,

阅读全文

与在线编译scssapi相关的资料

热点内容
小米sd卡解压 浏览:996
程序员那么可爱陆漓替老袁说情 浏览:28
当女程序员遇见问题 浏览:746
32位编译器什么意思 浏览:355
php多参数函数 浏览:17
通达信板块动作源码 浏览:751
matlab完全自学一本通pdf 浏览:250
php源码本地安装 浏览:961
服务器怎么用不会断电 浏览:301
主从服务器有什么用 浏览:213
jstlpdf 浏览:14
安卓原神在哪个app下载 浏览:808
单片机编程技术什么意思 浏览:104
e点课堂源码 浏览:46
免费打击垫app哪个好 浏览:532
程序员必装的6款软件 浏览:750
基于单片机的遥控器设计 浏览:521
安卓如何取消圆图标 浏览:11
收件服务器怎么样 浏览:48
建筑设计规范pdf 浏览:99