Tag: sass

如何在angular2中使用引导程序4?

我正在构build一个用脚本编写的angular度2应用程序。 它将使用引导4框架结合一些自定义主题,这是可能的吗? “ng2-bootstrap”npm包不起作用,因为它不允许我使用引导css类,而是提供自定义组件。 ( http://github.com/valor-software/ng2-bootstrap ) 在我的angular度2项目中,我使用的是sass,是否可以从源代码构build引导程序4,因为它也使用sass的样式?

有没有任何Sass代码格式?

有什么代码美化格式的萨斯(SCSS)代码? 我知道如何格式化由SCSS编译器生成的输出CSS代码,但如何给SCSS代码本身提供很好的自动格式化? 我已经尝试了一些在线CSS格式化程序,但是它们不适用于SCSS代码。 如果我把这个给他们 .list5 { border-bottom: 1px solid #f2f2f1; padding: 0 0 20px 0; margin: 0 0 20px 0; ul li { margin: 0 0 5px 25px !important; height: auto !important; background: none !important; font-size: 14px; padding: 18px 3px 5px !important; width: 169px !important; } } 他们给这个输出 .list5 { border-bottom: 1px solid #f2f2f1; padding: […]

如何closuresRails 3.1上的自动样式表/ JavaScript生成?

我正在开发一个Rails 3.1项目,但是我不希望每次运行rails generate controller controller_name 。 我可以发誓我已经看到互联网上的设置,但我现在无法为我的生活find它。 它是什么? 请记住,我仍然想要使用资产pipe道和CoffeeScript / Sass集成,但我正在以自己的方式组织这些文件。 我很确定答案是一个命令行参数,但用生成器设置或隐藏的文件或其他东西closures它的奖励点。 编辑 :我find了它的命令行标志。 rails generate controller controller_name –assets=false 或者类似的东西(该行实际上出错了,但它也不会产生资产)。 这里的API显示:assets => true作为默认选项。 如何将其更改为false,并在每次生成控制器时始终为false?

sass @mixin可以接受一个未定义数量的参数吗?

我正在尝试为转换创build一个sass mixin。 这是我迄今为止。 @mixin transition($var) -webkit-transition: $var transition: $var 我想能够传递这样的多个参数 @include transition(color .5s linear, width .5s linear) 不幸的是,我得到以下错误 Syntax error: Mixin transition takes 1 argument but 2 were passed. 有没有办法做到这一点,所以它在CSS中产生以下输出,同时仍然接受未定义数量的参数? -webkit-transition: color .5s linear, width .5s linear; transition: color .5s linear, width .5s linear;

我应该使用@import还是清单文件?

Rails 3.1引入了一个新的方式来组织JS和CSS和清单文件的引入。 例如, application.js可能如下所示: //= require jquery //= require jquery-ui //= require jquery_ujs //= require_tree . 这将抓住JQuery的各个部分,所有你自己的JS,连接在一起,并作为一个单一的文件提供给客户端。 很简单。 不幸的是,SASS对我来说不太清楚。 SASS已经使用@importbuild立了连接。 我是否应该将所有部分更改为完整的SASS文件,然后使用清单文件连接它们或继续使用@import? 为什么?

Sass与CSS模块和Webpack

我一直在使用Webpack,Sass和CSS模块构build一个项目。 通常在我的.scss文件中,我定义了一个类如下: :local(.button) { color: white; } 在我的React组件中,在render方法中,我需要样式: render = () => { const styles = require('./MyStyles.scss'); <div className={ styles.button } /> } 和世界都好。 一切都按预期工作。 现在我正在阅读CSS模块页面 ,注意到没有一个select器被:local()包含在内,而且他们导入的样式如下: import styles from './MyStyles.scss'; 我认为“哇,看起来更好,更容易看到它的import等,而我不想使用:local() ,只是本地默认情况下。 所以我试了一下,立即遇到了几个问题。 1)`从./MyStyles.scss'导入样式; 因为我在我的React文件上使用了ESLint,所以我马上得到一个错误: MyStyles.scss没有默认的导出,这通常是有意义的,但CSS模块页面声明: 从JS模块导入CSS模块时,它会导出一个包含从本地名称到全局名称的所有映射的对象。 所以我自然希望样式表的默认导出也是他们所指的对象。 2)我试着import { button } from './MyStyles.scss'; 这通过linting,但button日志为未定义。 3)如果我恢复到导入我的样式的require方法,任何未指定的:local是未定义的。 作为参考,我的webpack加载器(我也包括Node-Neat和Node-Bourbon ,两个很棒的库): { test: /.(scss|css)$/, loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + […]

rails 3.1资产pipe道csscaching在开发中

我有点困惑,因为它看起来像application.css包括自己两次,一旦列出资源清单,然后caching。 所以,当我删除一个单独的文件,它似乎仍然活在application.css文件内。 application.css(来源) /* *= require twitter/bootstrap *= require_self *= require_tree ./common *= require_tree ./helpers */ 其中按预期工作,并在开发模式下输出所有相关的个人文件 development.rb # Do not compress assets config.assets.compress = false # Expands the lines which load the assets config.assets.debug = true 产量 <link href="/assets/twitter/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" /> <link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" /> <link href="/assets/common/announcement.css?body=1" media="screen" rel="stylesheet" type="text/css" […]

什么是Yeoman工作stream与Sass文件?

我尝试使用yeoman,但我不知道如何使用自己的sass文件。 同 grunt server Sass文件被监视和编译成 .tmp/styles/ 但没有引用编译的样式表,除了<link rel="stylesheet" href="styles/main.css"> 那么,在开发过程中,如何在index.html中使用编译好的sass文件? 例如grunt server ,如果我将我的样式app/styles/my.sass为.tmp/styles/my.css ,则会被覆盖,并且它位于服务器之外(localhost:9000)。 因此,它不可能在index.html链接它。 grunt build是main.css中的一切,包括my.sass但在开发过程中,我不知道如何在index.html使用自己的sass文件。 你能给我一些简单的例子吗? 这是默认yeoman安装。 我做到了这一点: yo angular test 我添加app/styles/style.sass grunt server将style.sass编译成.tmp/styles/style.css 现在我不知道如何在html中包含style.css (对不起,这可能是一个愚蠢的问题,但我也是新手,也是咕噜咕噜) 这是来自yeoman的Gruntfile.js: 'use strict'; var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet; var mountFolder = function (connect, dir) { return connect.static(require('path').resolve(dir)); }; module.exports = function (grunt) { // load all grunt tasks […]

如何在HTML中包含SCSS文件

我不知道如何在我的网站包含SCSS文件,但我已经完全用记事本开发.scss文件。 请让我知道如何将其包含在我的网站?

错误:找不到模块'gulp-sass'

当我吞下肚,我得到了一个像下面的错误。 我该如何解决它? module.js:339 throw err; ^ 错误:找不到模块'gulp-sass' at Function.Module._resolveFilename (module.js:337:15) at Function.Module._load (module.js:287:25) at Module.require (module.js:366:17) at require (module.js:385:17) at Object.<anonymous> (/Applications/XAMPP/xamppfiles/htdocs/flyscoot.com/gulpfile.js:2:12) at Module._compile (module.js:435:26) at Object.Module._extensions..js (module.js:442:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:311:12) at Module.require (module.js:366:17)