标签: css-preprocessor

我想制作一个按钮颜色的mixin.我的目标是迭代值列表(绿色,红色,蓝色),然后构建类名,然后将正确的变量颜色应用于背景.

我成功地做到了这一点:

green = #38ab0b
red = #ab130b
blue = #099aab

colors = green, red, blue

for color, i in colors
  .btn-{color}
    background: mix(color, white, 60%)
    &:hover
      background: lookup(color)

然而,这表示为:

.btn-color {
  background: ;
}
.btn-color:hover {
  background: #008000;
}
.btn-color {
  background: ;
}
.btn-color:hover {
  background: #f00;
}
.btn-color {
  background: ;
}
.btn-color:hover {
  background: #00f;
}

这个例子类似,我想这样做,除了它不需要变量还有什么办法,我可以做到什么,我想,我知道该怎么做,在SCSS但我试图让开关.

编辑:

我尝试了以下但无法使其工作.背景很好,但类名不生成.

$green = #38ab0b
$red = #ab130b

colors = green $green, red $red

for pair in …

我现在是Bootstrap(3.3.4)的新手,我似乎对我的发布网站的页脚位置有问题.我只希望将页脚固定在较大的屏幕(平板电脑和计算机)上,而不是移动设备.

由于Bootstrap现在是移动优先的,我没有在我的css代码中明确声明我的页脚的位置样式(因为我不想修复它),除了我更大的屏幕媒体查询:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {

  /* Pull out the header and footer */
  .mastfoot {
    position: fixed;
    bottom: 0;
  }

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {

  /* Pull out the header and footer */
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
}

/* …

我有以下Sass,按照@each的这个例子:

@each $flag in USA, EUR, JPN {
  a.#{$flag} {
    display:inline-block;
    overflow:hidden;
    width:0;
    height:11px;
    padding-left:16px; 
    background:url('http://res.cloudinary.com/mrengy/image/upload/v1470163121/#{$flag}.gif');
  }
}

它只是回答另一个问题的一个例子.在Codepen中,它给了我一个错误

"USA,EUR,JPN"后的CSS无效:预期表达式(例如1px,粗体)为"{"

这是Codepen上的示例.

这个错误毫无意义.这里有什么问题？

我将Brackets用作文本编辑器。请告诉我如何编译LESS代码并将其转换为CSS？

以下是我下载LESS编译器的链接，但我不知道如何将代码转换为CSS。

https://github.com/jdiehl/brackets-less-autocompile

我想写这样的东西:

$widthXl: 1000px
$widthSm: 500px
@mixin med ($prop, $xl, $sm)
  @media (max-width: $widthXl)
    &
      $prop: $xl
  @media (max-width: $widthSm)
    &
      $prop: $sm
a
  @include med(width, 600px, 300px)
b
  @include med(color, #000, #888)

得到这个:

@media (max-width: 1000px) {
  a {width: 600px}
  b {color: #000}
}
@media (max-width: 500px) {
  a {width: 300px}
  b {color: #888}
}

但是我的代码没有编译它.可能吗？

知道某人是否面临同样的问题会很有趣.

如果我删除属性,代码工作正常.但我想创建复杂的解决方案.

好的，所以我知道这对我来说完全是愚蠢的事情，但是我似乎做了很多。

有人知道我该怎么做吗？

#theme (dark)  {@primary: black;}
#theme (light) {@primary: white;}
#theme (@_)    {@primary: yellow;}

@name: dark;
#theme(@name);

.rule {
  color: @primary;
}

这是我实际上试图做的事的过度简化，但我希望它能使我明白我的意思。本质上，我试图定义一些“主题”，这些主题将具有颜色和图像（可能），并将在各个Less文件中使用。过去，我在全球范围内进行了定义，并注释掉了那些未被使用的东西，但是我试图看看是否有人找到了Less比我更好的策略。感觉应该有一种方法可以做到这一点。

我曾经发现一个功能曾经是（？）的一部分，Less但似乎不起作用。

.theme {
  @color: red;
}

.rule {
  color: .theme > @color;
}

如果有效的话，那会很棒。

我喜欢将Bourbon与LiveReload一起使用,但我似乎无法让它们一起工作.有人成功地让这两个玩得好吗？

在我的CSS中,我必须创建引用"头发颜色"和"发型"的类.

我写了一个mixin来帮助我提高CSS编写效率:

@mixin hair($hair, $colour) {
    .hair-#{$colour} .#{$hair}  { 
background:image-url("xsppsfhair#{$hair}#{$colour}.svg") center top no-repeat, 
image-url("xsppsheadgrey.svg") center top no-repeat, 
image-url("xsppsbhair#{$hair}#{$colour}.svg") center top no-repeat;
}


}

@include hair(spikyboy, blonde);    
@include hair(curlyafroboy, blonde);    

这会产生以下CSS

.hair-blonde .spikyboy {
  background: url('../images/xsppsfhairspikyboyblonde.svg?1348681869') center top no-repeat, url('../images/xsppsheadgrey.svg?1348834673') center top no-repeat, url('../images/xsppsbhairspikyboyblonde.svg?1348682005') center top no-repeat;
}

.hair-blonde .curlyafro {
  background: url('../images/xsppsfhaircurlyafroblonde.svg?1348681869') center top no-repeat, url('../images/xsppsheadgrey.svg?1348834673') center top no-repeat, url('../images/xsppsbhaircurlyafroblonde.svg?1348682005') center top no-repeat;
}

这很棒,但由于我总共有35种头发颜色和发型,我的结局太多了@includes.

在这个页面上,它说SASS有一个@each,可用于遍历列表.有一个进一步的例子在这里.但是,这两个示例仅显示循环到1列表.是否可以遍历两个列表？

我尝试了很多代码,但似乎都没有.我认为以下肯定会有效,但我只是得到一个关于$ color未定义的错误消息.

$hairstyle: (red, blonde, ltbrown);
$haircolour: (red, blonde, ltbrown);

    @each …

刚进入CSS预处理器的有趣世界.假设我们使用LESS来渲染我们的CSS.我想知道两种不同的方法:

• 使用LESS在每个页面加载时呈现CSS.
• 使用LESS作为构建过程的一部分,并在生产中使用渲染的CSS.

我想知道是否有时候你会使用一个而不是另一个.一方面,您有一个动态CSS运行时,另一个静态CSS构建来自(希望)简洁明了的LESS模板.

问题

我是LESS的新手,我们在中级CSS和预处理器课程中学习了一些关于参数混合的基础知识.我正在我的项目网站上工作,喜欢LESS可以做的事情,但并不总是按照我想要的方式工作.

例如,在第143行附近,我正在设置导航背景颜色,如下所示:

background-color: lighten(@color5, 50%);

@ color5先前在导入的palette.less文件中定义为深紫色.nav元素的背景颜色是预期的淡紫色,告诉我lighten()函数本身正在工作.

但是,在文件的下方,在"桌面"显示的媒体查询中(我使用的是移动优先方法)我设置了nav未访问的链接颜色,如下所示:

color: lighten(@color5, 75%);

我期望这个任务输出更淡的薰衣草色调,但相反,它只显示白色(#ffffff).我仔细检查以确保颜色不仅仅是紫色的超浅色 - 不.它是白色的.

在相同的媒体查询中,我还使用该spin()方法将链接悬停颜色设置为不同的色调.但是,它也没有工作,我的悬停颜色被翻译为白色.没有意义.

我的代码

以下是我的代码的一些片段,但我不确定SE片段是否与LESS一起使用.或者我在CodePen上发布了它:

CodePen | CAS215 - Wk8 - MobileFirstResponsive

style.less

/*

Assignment: CAS 215 - Module 8 Lecture Assignment
File Name: style.less
Date: 11/17/16
Programmer: Eric Hepperle

*/

@import 'palette.less';
@import 'mixins.less';

/* /END PARAMETRIC MIXINS */

/* MOBILE STYLESHEET ------------------------- */

/* UNIVERSAL SELECTOR */
* {
    box-sizing: border-box;
}

/* BODY */
body …

假设我在NetBeans 7.4上有这个HTML5项目

myproject <---project folder
  |
  |-- public_html <---web root (the only visible in Projects tab)
  |     |
  |     |-- css
  |           |-- style.css
  |
  |-- scss
        |-- file1.scss
        |-- file2.scss
        |-- more
              |-- file3.scss

我想以这样的方式配置NetBeans,当我保存file1.scss,file2.scss和file3.scss中的任何一个时,它会将所有这些文件编译成style.css,最好是缩小...

可能吗？如果是这样,我应该在项目属性中写什么(见图)？

注意:在NetBeans中正确安装和配置了SASS

我使用定位Mixins将div对齐到页面的顶部或左侧或中心，等等，它在SCSS和Sass上都能正常工作，但是由于某些原因，当我尝试使用Stylus时，它的表现非常奇怪。

如果我包含一个Mixin，它可以正常工作，但是当我在下面添加更多Mixin时，它将默认为另一个Mixin。

我的Mixin示例：

top()
   position absolute
   margin auto
   top 0
   right 0
   //bottom 0
   left 0

越野车代码的可编辑演示

一些理论：

• 结合我的声明了吗？
• 触控笔无法识别我正在呼叫哪个Mixin？

在此先感谢您的帮助！