标签: css-preprocessor

在VS <= 2015中,我们可以使用WebEssentials扩展,负责为我们编译less/sass文件,但目前它不支持VS 2017.您是否知道类似的扩展可以编译更少/ sass在构建？

如何在Visual Studio 2013中使用Sass CSS预处理器？是否有任何扩展为Sass提供支持？

我有:

1. 我要捆绑的JS文件.
2. 我想编译成CSS的LESS文件(将@imports解析为单个包).

我希望将这些指定为两个单独的输入并具有两个单独的输出(可能通过extract-text-webpack-plugin).Webpack有所有适当的插件/加载器来进行编译,但它似乎不喜欢分离.

我已经看到人们需要直接从JS获取LESS文件的例子,例如require('./app.less');,除了告诉webpack将这些文件包含在bundle中之外别无他法.这允许你只有一个入口点,但这对我来说似乎非常不对 - 为什么我的JS中的LESS与我的JS代码无关时需要LESS？

我尝试使用多个入口点,将条目JS和主LESS文件都放入其中,但是当使用多个入口点时,webpack会生成一个在加载时不执行JS的包 - 它将所有内容捆绑在一起,但不知道什么应该在启动时执行.

我只是使用webpack错了吗？我应该为这些单独的模块运行单独的webpack实例吗？如果我不打算将它们混合到我的JS中,我是否应该将webpack用于非JS资产？

我想在SASS中动态创建mixins,以列表中的每个项目命名,但它似乎不起作用.

我试过这个,但是我收到一个错误:

$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch
@each $event-icon in $event-icons
  @mixin event-icon-#{$event-icon}
    background-position: -($event-icon-width * $i) 0

错误:

Invalid CSS after "": expected expression (e.g. 1px, bold), was "#{$event-icon}"

SASS不支持此用法吗？我在手册中找不到任何关于它的内容.

我正在使用Angular4和开始我的第一个项目,sass并且我正试图弄清楚如何以sass正确的方式工作.我正在使用angular-cli并已设置默认样式以使用scss语法.我也已经定义了编译等.

但是我看到组件上有一个选项styleUrls,在某些情况下我们定义仅在该组件中使用的样式.

问题是,当我设置一个scss文件时,component它不会生成它自己的.css文件,既不包含在主.css文件中,而是从根项目生成的.

所以基本上我有一个像这样的项目结构:

app
    app.module.ts
    app.routing.ts
    home
        home.component.ts
        home.html
        _home.scss
    client
        client.component.ts
        client.html
        _client.scss
scss
    _imports.scss
    colors
        _colors.scss
    ui
        _button.scss
        _table.scss
    //.. more folder and files
styles.scss
index.html

我希望能够css在styles.scss文件中设置主要样式,index.html稍后将在构建过程中将其插入到文件中.但也能够生成一个单一的css每个组件我有,如文件home和client,并且只使用那些css自己份内的风格component.

有可能吗？我试过这个,我没有找到任何关于此的其他资源!

我是第一次使用Compass spriting.我希望有图标图像(大小各不相同)居中位置.喜欢附图

我正在使用此设置

$icons-spacing:40px;
@import "icons/*.png";
@include all-icons-sprites;

我得到的CSS是(例如)

.icons-adventure {
  background-position: 0 -608px;
}

这不是我所要求的.我想从顶部和左边给出更多的间距.

我的问题实际上比标题所说的更广泛.这正是我遇到想法的障碍,但我对各种解决方案持开放态度.让我解释一下我的总体目标.

我喜欢CSS预处理器可以做的事情.我喜欢OOCSS和SMACSS的想法.我是所有这一切的新手.我正在尝试升级我的设计方法,以某种方式融入最好的世界.我的理论方法是这样的:

• 仅使用语义类名称或id或其他
• 在一些常见样式表中定义模块或模式
• 每页样式表将@extend模块从公共样式表扩展到与给定页面相关的语义选择器

所以这:

/* modules.scss */
.ruddy {color: red}
.fullwidth {width: 100%; display: block;}

加上这个:

/* homepage.scss */
@import modules.sass

#intro {@extend ruddy; @extend fullwidth}
aside {@extend ruddy;}
.thing {@extend fullwidth;}

成为这个:

/* homepage.css */
#intro, aside {color: red}
#intro, .thing {width: 100%; display: block;}

我没有看到别人这样做,但对我来说这似乎是个好主意.我在我的宏计划中遇到的问题是@extend似乎不能从导入的文件中运行.在SO的其他地方有人说这是不可能的.这是真的？我有mixins工作,但问题是他们复制输出css中的每个属性,这似乎不理想.

我实际上更偏爱LESS(语法),但目前甚至没有延伸.我不应该担心mixins效率低下还是有办法实现我的要求？

注意: 我使用名为Prepros的工具自动编译我的sass.当我尝试编译如上所述的代码时,我得到一个错误.

警告在......\sass\home.scss的第11行:"#intro"未能@extend"ruddy".未找到选择器"ruddy".

如果我只是将module.scss中的代码复制到homepage.scss中,那么问题就会消失.

我正在开始一个相当大的项目,我正在考虑使用LESS来预处理我的CSS.

关于LESS的有用之处在于你可以定义一个包含例如的mixin:

.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -o-border-radius: @radius;
    -ms-border-radius: @radius;
    border-radius: @radius;
}

然后在类声明中使用它作为

.rounded-div {
   .border-radius(10px);
}

获取输出css为:

.rounded-div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

这对于浏览器前缀非常有用.但是,这个相同的概念可用于封装常用的css,例如:

.column-container {
    overflow: hidden;
    display: block;
    width: 100%;
}
.column(@width) {
    float: left;
    width: @width;
}

然后在我的设计中需要列时使用此mixin:

.my-column-outer {
    .column-container();
    background: red;
}
.my-column-inner {
    .column(50%);
    font-color: yellow;
}

(当然,使用预处理器我们可以很容易地将其扩展为更有用,例如,将列数和容器宽度作为变量传递,并且根据列数和容器宽度确定每列的宽度! )

这个问题是,在编译时,我的最终css文件将有100个这样的声明,复制和粘贴,使文件变得庞大,臃肿和重复.另一种方法是使用一个网格系统,它为每个列布局选项预定义了类,例如.c-50(带有"float:left; width:50%;"定义),.c-33 ,. c-25适用于2列,3列和4列布局,然后将这些类用于我的dom.

我真的不喜欢额外的类的想法,从经验到结果膨胀的dom(创建额外的div只是为了附加网格类).另外,html/css最基本的教程会告诉你dom应该与样式分开 - 网格类与样式相关!对我来说,就像将"border-radius-10"类附加到上面的.rounded-div示例一样!

另一方面,由重复代码产生的大型css文件也是一个缺点

所以我想我的问题是,你会推荐哪一个,你用哪个？

哪种解决方案最适合优化？除了更大的文件大小之外,是否有任何关于浏览器是否比大型css文件更快地渲染多个类的研究,或者反过来？

我很想听听你的意见!

现在很少有任何项目不使用任何类型的CSS预处理器,如Sass或LESS.虽然它已被广泛接受并且优势非常明显(如更结构化的代码,没有include性能下降和许多其他).如果有任何huge缺点,我会徘徊.我能想到的就是太大的嵌套选择器,它们在重新绘制/回流期间表现不佳.not使用预处理器的任何其他原因？

我看到了这个html模板，并使用Chrome检查工具对其进行了检查。
令我惊讶的是，我的浏览器可以检测到scss文件，而不是已编译的css文件。然后，我按Ctrl + U来查看页面源代码，尝试找到“ scss”，但结果不显示任何内容。
那么，浏览器如何知道scss文件？

PS我是scss / sass / css预处理程序的新手