天道酬勤,学无止境

sass

sass can be converted to css, but not working with watch command

everyone, I am SASS beginner, just started to learn Sass. So, this question may seemed ridiculous to someones. Here, I got style.scss $myColor: #009a82; $myString: " some text here "; $myFontSize: 13px; $myMargin: 0px auto; $myWidth: 460px; h1 { color: $myColor; margin: 0; padding: 0; } #container { width: $myWidth; margin: $myMargin; } when I use command sass style.scss style.css I can get a css file: h1 { color: #009a82; margin: 0; padding: 0; } #container { width: 460px; margin: 0px auto; } However, when I use command sass --watch Sass:style I got : /* Error: Invalid property: "Backtrace:"

2022-01-17 03:24:15    分类:问答    sass

compass watch command is erroring out when trying to access compass-core-1.0.0.alpha.16/stylesheets/.listen_test

I believe this happened after upgrading to Ruby 2.0.0 and then I resintalled my gems needed for compass watch. I also installed Ruby 1.9.1 and installed the gems for compass watch and got the same error. I tried to change the permissions on the file .listen_test, but it doesn't exist. Here's the --trace: compass watch --trace >>> Compass is watching for changes. Press Ctrl-C to Stop. error sites/all/themes/dr/compass/sass/blog-ie.sass (Line 919 of sites/all/themes/dr/compass/sass/blog.sass: Invalid flag "!important".) identical sites/all/themes/dr/compass/css/blog-ie.css error sites/all/themes

2022-01-17 01:00:23    分类:问答    ruby   sass   compass-sass

Angular 6: How to hide radio circle using Angular Material and use NgStyle for checked answer?

I'm having trouble with two things: Hide circles of mat-radio-group Change p tag background to blue if checked I've tried using ::ng-deep to override css properties and change colors to white, tried to configure invisibility:hidden but none worked. Also, I tried to use ngStyle to configure that the background color of p tag will be blue if checked but it didn't work. This is the HTML: <div class="container-fluid"> <header class="lesson-heading" *ngIf="currentQuestion"> <span class="title"></span> <h2>Question {{currentIndex + 1}}/{{quiz.questions.length}}</h2> </header><!-- end lesson-heading

2022-01-16 18:58:34    分类:问答    angular   forms   sass   radio-button   angular-material

GruntJS“总线错误咕噜手表”(GruntJS "bus error grunt watch")

问题 当我尝试运行grunt watch时,我遇到了 GruntJS 错误。 它工作正常,直到它正在观看的文件发生变化,然后,它看起来像这样: Running "watch" task Waiting...[1] 2464 bus error grunt watch 数字2464发生变化。 似乎是 grunt 正在监视的端口? 但是,我不确定。 这是我的 Gruntfile: module.exports = function (grunt) { "use strict"; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { dist: { options: { style: 'compact' }, files: { 'css/style.css': 'sass/style.scss', } } }, watch: { files: 'sass/style.scss', tasks: ['sass'] } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', ['sass']); }; 提前感谢所有帮助! 回答1

2022-01-16 18:58:31    分类:技术分享    command-line   terminal   sass   gruntjs   watch

How to generate multiple mixins (mixin lib) with loop in sass

I would like to keep my sass code short. instead of @mixin tg($font-size,$line-height) { something related to font-size and line-height } @mixin h1 { @include tg } @mixin h2 { @include tg } .... How can i create a @mixin lib with loop? $typography-list: h1, h2...... @mixin tg($font-size,$line-height) { something related to font-size and line-height } @each $typography in $typography-list { create @mixin { @include tg() } } if so, what is the best way of doing it?

2022-01-16 17:20:44    分类:问答    sass

如何在SASS中将整数转换为十六进制(How to convert integer to hex in SASS)

问题 代替 Chris Eppstein 提到的作为 SASS 正在进行的工作的 Map 数据结构之类的东西,我正在尝试实现类似的东西 - 将字符串映射到相应的十六进制值,该值将用于指定 CSS 的 unicode 字符内容属性。 (我正在尝试重构一些字体图标 SASS 代码。) 目前我有一些基本的东西,比如: /*icon1 --> \F000 icon2 --> \F001 icon3 --> \F002*/ @function u-char($name) { @if $name == icon1 { @return "000"; } @else if $name == icon2 { @return "001"; } @else if $name == icon3 { @return "001"; } } @mixin icon-class($name) { ... content: "\f#{u-char($name)}"; ... } 但我实际上是在尝试映射大量字符,所以这种方法很费力。 我希望能够做类似的事情: @function u-char($name) { $i: 0; $itemList: item1, item2, item3; @each $currItem in $itemList { @if $name == item1 { @return i-to

2022-01-16 17:02:07    分类:技术分享    css   sass   hex   string-conversion

如何使用 SASS for 循环生成 CSS 内容(How to generate CSS content with a SASS for loop)

问题 我正在尝试创建一个像这样运行的 SASS mixin: @include custom-horiz-sep(7); 这将输出CSS: content: "xxxxxxx"; (7 个预定义字符) 如何在 SASS 中使用“for”循环来为“content”属性创建值? 回答1 在 bookcasey 和 cimmanon 的帮助下,这似乎很有效: @mixin custom-horiz-sep($num) { $chr: "x"; $content: $chr; @for $i from 0 to $num { $content: $content + $chr; } content: "#{$content}"; } h1:before { @include custom-horiz-sep(25); } http://codepen.io/Protohominid/pen/rgzKF

2022-01-16 16:58:01    分类:技术分享    css   for-loop   sass

GruntJS "bus error grunt watch"

I'm having an error with GruntJS when I try to run a grunt watch. It works fine, until there is a change in the file it is watching, then, it looks something like this: Running "watch" task Waiting...[1] 2464 bus error grunt watch The number 2464 changes. It seems to be the port that grunt is watching on? But, I'm not sure. Here is my Gruntfile: module.exports = function (grunt) { "use strict"; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { dist: { options: { style: 'compact' }, files: { 'css/style.css': 'sass/style.scss', } } }, watch: { files: 'sass/style.scss', tasks:

2022-01-16 16:03:22    分类:问答    command-line   terminal   sass   gruntjs   watch

webpack 的 sass-loader 找不到没有下划线前缀的基础 scss 文件(webpack's sass-loader do not find foundation scss file without underline prefix)

问题 最近,我正在使用webpack 、 sass 、 bower和foundation5开发快速前端开发工具链。 我遇到一个问题:sass-loader 只加载带有下划线前缀的 scss 文件。 环境 节点 v0.12.4 网络包 1.9.11 节点萨斯 3.2.0 萨斯加载器 1.0.2 操作系统 gentoo 3.18 webpack.config.js var webpack = require('webpack'); var path = require('path'); var getDir = function() { var args = Array.prototype.slice.call(arguments); return path.join.apply(path, [__dirname].concat(args)); }; module.exports = { // webpack options context: getDir('./src'), entry: { test: "./style/test.scss" }, output: { path: getDir('./build'), filename: "[name].js" }, module: { loaders: [ { test: /\.scss$/, loader: "style!css

2022-01-16 15:16:52    分类:技术分享    css   node.js   sass   webpack

How to convert integer to hex in SASS

In lieu of something like the Map data structure that Chris Eppstein mentions as a work in progress for SASS, I'm trying to achieve something similar - mapping a string to a corresponding hex value, which will be used to specify a unicode character for CSS content property. (I'm trying to refactor some font icon SASS code.) At the moment I have something rudimentary like: /*icon1 --> \F000 icon2 --> \F001 icon3 --> \F002*/ @function u-char($name) { @if $name == icon1 { @return "000"; } @else if $name == icon2 { @return "001"; } @else if $name == icon3 { @return "001"; } } @mixin icon-class(

2022-01-16 14:27:46    分类:问答    css   sass   hex   string-conversion