前端框架 Less 学习与实践

Less 学习与实践

安装

• Leaner Style Sheets
• 和CSS非常像，使用起来更加顺手

Node引入

• cnpm install -g less

浏览器引入

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

特性

变量 Viriables

• 可以直接定义成一个变量，多个样式可以直接使用，@+变量名

@width: 100px;
@height: 200px;
.header {
    background: green;
    width: @width;
    height: @height;
}

混合 Mixins

• 将一组属性直接嵌入到另一个样式中,就像调用方法一样，样式名+()

.main1 {
    background: red;
    width: @width ;
    height: @height ;
}

.main2 {
    .main1();
    background: orange;
}

嵌套 Nesting

• 样式层级较深时，LESS方式书写更加容易读懂

.main2 {
    background: orangered;
}

.main2 .name {
    background: red;
}

.main2 .title {
    background: green;
}
// LESS写法
.main2 {
    background: orangered;
    .name {
        background: red;
    }
    .title {
        background: green;
    }
}

• @规则嵌套

.main2 {
    background: green;
    width: @width;
    height: @height;
    @media (min-width: 768px) {
        width: 200px;
    }
    @media(min-width:1080px) {
        width: 500px;
    }
}

运算 Operations

• 按照@方式定义的变量可进行运算

.main3{
  background: #345 + #202;
  width: @width/2+199px;
  height: calc(@height+50px+(@width - 20px));
}

转义 Escaping

• ~符号包含的字符串，原封不动的解析出来

@min768: ~"(min-width:768px)";
.main3{
  @media @min768 {
    width: @width/4;
  }
}

函数 Functions

• Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。
• 参考函数手册
• percentage 小数转成百分数
• saturate 增加颜色饱和度
• lighten 改变亮度
• spin 增加色相值

@base: #f04615;
@mainWidth: 0.5;
.main3{
  width:percentage(@mainWidth);
  color:saturate(@base,5%);
  background-color: spin(lighten(@base,25%),8);
}

命名空间和访问符

• 其实就是定义样式组，方便外部引用。#+空间名
• 引用方式两种
  • #Song.title();
  • #Song > .content;

#Song(){
  .title{
    font-size: 30px;
  }
  .content{
    font-size: 10px;
  }
}

.title{
  color: #f04615;
  #Song.title();// 
}
.content{
  color: blue;
  #Song > .content;
}

映射 Maps

• Less 3.5 开始才有的，类似一个枚举变量

#MyColors(){
  first:blue;
  second:red;
  third:green;
}
.title{
  color:#MyColors[first];
}
.content{
  color:#MyColors[third];
}

作用域 Scope

• Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

@var: red;

.main3 {
    .title {
        color: @var;// black
    }
    @var:black;
}

注释 Comments

• 块注释和行注释都可以使用

/* 一个块注释
 * style comment! */
@var: red;

// 这一行被注释掉了！
@var: white;

导入 Importing

• 可以导入less文件，内部所有变量都可以使用。可以省略后缀名

@import "MyLess.less"
@import "MyLess"

Vue 中使用Less

• 首先安装Less less-loader sass-resources-loader
• 然后配置build项目中的文件utils.js ,使用sass-resources-loader进行加载
• 并在webpack.base.conf.js 中引入utils.js

'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const pkg = require('../package.json')

exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory
  return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  var postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
      // less
      if (loader === 'less') {
        loaders.push({
          loader: 'sass-resources-loader',
          options: {
            // it need a absolute path./less/common.less
            resources: [path.resolve(__dirname, '../src/less/variable.less'), path.resolve(__dirname, '../src/less/mixins.less')]
          }
        })
      }
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  const output = []
  const loaders = exports.cssLoaders(options)
  for (const extension in loaders) {
    const loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }
  return output
}

exports.createNotifierCallback = function () {
  const notifier = require('node-notifier')

  return (severity, errors) => {
    if (severity !== 'error') {
      return
    }
    const error = errors[0]

    const filename = error.file && error.file.split('!').pop()
    notifier.notify({
      title: pkg.name,
      message: severity + ': ' + error.name,
      subtitle: filename || '',
      icon: path.join(__dirname, 'logo.png')
    })
  }
}

• 使用theme.less,可以在webpack.base.conf.js中进行配置

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [
    {
      name: 'less-theme',
      path: 'src/less/theme.less' // 相对项目根目录路径
    }
  ]
})