标签: stylus

我一直在寻找一种方法来进行像素计算百分比而不使用calc().我希望能够使用calc,但目前移动游猎(ios)在ios6之前不支持它.有没有办法在LESS中这样做？我知道你可以做计算,但据我所知,你不能做100% - 20px之类的事情.有什么建议？

我有很多css文件和很多次出现:

@media all and (max-width: 400px), (orientation: portrait) {
    ....//In each file different style that relevant to the component the file represnt
}

我正在使用手写笔.
有一天,我的老板让我将该媒体查询更改为:

@media all and (max-width: 400px), (max-height: 400px) {
    ....
}

现在我需要搜索我的所有文件并替换为新的媒体查询.

有没有选择将这个媒体查询放入mixin或其他东西？

这样的事情可能吗？

for my_class_selector in _aClass _bClass _cClass _dClass _eClass ... 
    .my_class_selector
        display none

基本上我想创建一堆具有类似属性的类...

减

.list a{
    .landscape&{
        height: 100%;
    }
}

产出

.landscape.list a {
  height: 100%;
}

这意味着“其父母同时具有.landscape和.list的所有标签”

减

.list a{
    &.landscape{
        height: 100%;
    }
}

产出

.list a.landscape {
  height: 100%;
}

意思是“所有具有“ landscape”类且其父母具有“ .list”类的标签”

这是有道理的。但是，如果我从这些选择器中删除“ a”标记，则“＆”仅更改.list和.landscape的串联顺序。

重点是什么 ？什么时候应该使用＆.class？什么时候应该使用class。＆？

我正在为一个网站编写一个样式表,我需要支持多个皮肤/主题.例如,一个主题可能是黑白色,红色作为主要颜色,另一个主题可能是白色黑色,以栗色为主要颜色.

几乎所有来自一个主题的CSS都转换为另一个主题,除了前景和背景颜色之类的东西.

作为一个说明性的例子,假设我们有一个div.该div的大小和位置在主题之间是固定的,但颜色可能会改变.我们可以将它分成三个不同的CSS文件,如下所示:

/* main.css */
#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

/* theme1.css */
#box {
    backround-color: red;
}

/* theme2.css */
#box {
    background-color: maroon
}

然后最终用户将加载main.css加上一个主题样式表.另一种设计是在body元素上放置一个类,并使用选择器在一个CSS文件中应用正确的颜色.例如,

#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

body.theme1 #box {
    backround-color: red;
}

body.theme2 #box {
    background-color: maroon
}

第二种选择的优点是HTTP请求更少.第一个选项的优点是用户需要从服务器加载较少的数据.当有许多不同的主题时,这一点尤为重要,并且(在我的用例中)内联背景图像会显着增加CSS文件的权重.

所以我的问题是,如何利用像SASS或Stylus这样的CSS预处理器来创建多个CSS主题文件？

我想象这样的事情:

@theme(theme1) {
    $primaryColor: red;
}
@theme(theme2) {
    $primaryColor: maroon;
}

#box {
    position: …

我有一个使用css模块的webpack 2应用程序

我现在只想开始使用手写笔.

我想解决方案是更新我的webpack.config.js:

当前的webpack.config.js:

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [

      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader'
        }
      },

      {
        test: /\.css$/,
        loader: 'style-loader'
      },

      {
        test: /\.css$/,
        loader: 'css-loader',
        query: {
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },

    ]
  },
  resolve: {
    extensions: ['.js'],
    modules: [
      path.join(__dirname, …

我在手写笔中有一个看起来像这样的功能

// Shortcut for top-down gradient background color
td_gradient(color1, color2)
    background-color (color1 + (color2 - color1) / 2)
    background -webkit-gradient(linear, 0% 0%, 0% 100%, from(color1), to(color2))
    background -webkit-linear-gradient(top, color1, color2)
    background -moz-linear-gradient(top, color1, color2)
    background -ms-linear-gradient(top, color1, color2)
    background -o-linear-gradient(top, color1, color2)
    @css
    {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=color1, endColorstr=color2);
    }

我必须在文字css范围内包装Internet Explorer渐变样式@css,否则会崩溃手写笔.可能是太多冒号或其他东西.在任何情况下,变量color1和color2字面意思都在css范围内,这打破了风格.

我能以任何方式获得css范围来解析变量吗？或者有没有办法在不使用文字css范围的情况下在手写笔中获得滤镜样式？

有没有办法让触控笔计算的平方根x？
您知道，就像JavaScript Math.sqrt(x)一样。

我正在创建一个以原点为中心的钻石。我目前正在使用以下代码：

vendor(prop, args...)
    -webkit-{prop} args
    -moz-{prop} args
    -o-{prop} args
    -ms-{prop} args


rotate(r)
    vendor('transform', unquote('rotate('+r+')'))
    rotate r


.diamond
    display block

    width 7ex
    height @width
    line-height @height
    rotate(-45deg)

    /* calc offset of a rotated square
     * @width * @width = $offsetX * $offsetX + $offsetY * $offsetY
     * @width * @width = ( $offset * $offset ) * 2 // for a square: $offsetX= $offsetY
     * ( @width * @width ) / 2 = ( $offset …

我正在尝试进行简单的划分:

div
  height 20px / 2

/* Compiles to: */
div {
  height: 20px/2
}

我能够使用乘法来实现它...但为什么除法不起作用？

div
  height 20px * .5

/* Compiles to: */
div {
  height: 10px;
}

我想制作一个按钮颜色的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 …