{"id":13564140,"url":"https://github.com/tfanme/postcss-less2scss","last_synced_at":"2025-04-03T21:30:25.716Z","repository":{"id":44176437,"uuid":"124321723","full_name":"tfanme/postcss-less2scss","owner":"tfanme","description":"PostCSS plugin to convert Less to Scss","archived":false,"fork":false,"pushed_at":"2023-01-03T15:15:13.000Z","size":610,"stargazers_count":7,"open_issues_count":13,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-23T13:18:12.336Z","etag":null,"topics":["conversion","converter","less","postcss","postcss-plugin","scss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tfanme.png","metadata":{"files":{"readme":"README-CN.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-08T02:01:29.000Z","updated_at":"2020-09-04T02:04:56.000Z","dependencies_parsed_at":"2023-02-01T06:45:24.761Z","dependency_job_id":null,"html_url":"https://github.com/tfanme/postcss-less2scss","commit_stats":null,"previous_names":["princetoad/postcss-less2scss"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tfanme%2Fpostcss-less2scss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tfanme%2Fpostcss-less2scss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tfanme%2Fpostcss-less2scss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tfanme%2Fpostcss-less2scss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tfanme","download_url":"https://codeload.github.com/tfanme/postcss-less2scss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247082785,"owners_count":20880718,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["conversion","converter","less","postcss","postcss-plugin","scss"],"created_at":"2024-08-01T13:01:27.077Z","updated_at":"2025-04-03T21:30:25.312Z","avatar_url":"https://github.com/tfanme.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PostCSS 插件 Less2Scss [![Build Status][ci-img]][ci]\n\n[PostCSS] 将 Less 转换为 Scss 的 PostCSS 插件.\n\n[PostCSS]: https://github.com/postcss/postcss\n[ci-img]:  https://travis-ci.org/princetoad/postcss-less2scss.svg\n[ci]:      https://travis-ci.org/princetoad/postcss-less2scss\n\n## 转换变量\n\n### 转换变量的定义和使用\n\n* 不属于任何一个 Rule 的变量\n\nLess:\n```less\n@link-color: #428bca;\n```\n\nScss:\n```scss\n$link-color: #428bca;\n```\n\n* 在某个 Rule 中定义的变量\n\nLess:\n```less\n#main {\n  @width: 5em;\n  width: @width;\n}\n```\n\nScss:\n```scss\n#main {\n  $width: 5em;\n  width: $width;\n}\n```\n\n* 在 Declaration 的 value 中使用的变量\n\nLess:\n```less\n@text-color: @gray-dark;\n@link-color-hover:  darken(@link-color, 10%);\n```\n\nScss:\n```scss\n$text-color: $gray-dark;\n$link-color-hover:  darken($link-color, 10%);\n```\n\n* 在某个 Rule 中的一个 Declaration 的 value 中使用的变量\n\nLess:\n```less\na:hover {\n  color: @link-color-hover;\n}\n```\n\nScss:\n```scss\na:hover {\n  color: $link-color-hover;\n}\n```\n\n* 转换 At-Rules 中的变量\n\nLess:\n```less\n@screen-sm:                  768px;\n@screen-sm-min:              @screen-sm;\n\n.form-inline {\n\n  // Kick in the inline\n  @media (min-width: @screen-sm-min) {\n    // Inline-block all the things for \"inline\"\n    .form-group {\n      display: inline-block;\n      margin-bottom: 0;\n      vertical-align: middle;\n    }\n  }\n}\n```\n\nScss:\n```scss\n$screen-sm:                  768px;\n$screen-sm-min:              $screen-sm;\n\n.form-inline {\n\n  // Kick in the inline\n  @media (min-width: $screen-sm-min) {\n    // Inline-block all the things for \"inline\"\n    .form-group {\n      display: inline-block;\n      margin-bottom: 0;\n      vertical-align: middle;\n    }\n  }\n}\n```\n\n### Variable Interpolation\n\n* 转换选择器中的 variable interpolation\n\nLess:\n```less\n// Variables\n@my-selector: banner;\n\n// Usage\n.@{my-selector} {\n  font-weight: bold;\n  line-height: 40px;\n  margin: 0 auto;\n}\n```\nScss:\n```scss\n// Variables\n$my-selector: banner;\n\n// Usage\n.#{$my-selector} {\n  font-weight: bold;\n  line-height: 40px;\n  margin: 0 auto;\n}\n```\n\n## 转换 Mixins\n\n* 转换 Mixins 的定义（可以支持默认参数）\n\nLess:\n```less\n.alert-variant(@background; @border; @text-color) {\n  background-color: @background;\n  border-color: @border;\n  color: @text-color;\n\n  hr {\n    border-top-color: darken(@border, 5%);\n  }\n  .alert-link {\n    color: darken(@text-color, 10%);\n  }\n}\n```\n\nScss:\n```scss\n@mixin alert-variant($background, $border, $text-color) {\n  background-color: $background;\n  border-color: $border;\n  color: $text-color;\n\n  hr {\n    border-top-color: darken($border, 5%);\n  }\n  .alert-link {\n    color: darken($text-color, 10%);\n  }\n}\n```\n\n* 转换 Mixins 的使用\n\nLess:\n```less\n.a {\n    .center-block;\n}\n```\n\nScss:\n```scss\n.a {\n    @include center-block;\n}\n```\n\n* 支持 Mixins 的具有默认值的参数\n\nLess:\n```less\n@state-success-text:             #3c763d;\n@state-success-bg:               #dff0d8;\n@state-success-border:           darken(spin(@state-success-bg, -10), 5%);\n\n@state-info-text:                #31708f;\n@state-info-bg:                  #d9edf7;\n@state-info-border:              darken(spin(@state-info-bg, -10), 7%);\n\n@state-warning-text:             #8a6d3b;\n@state-warning-bg:               #fcf8e3;\n@state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);\n\n@state-danger-text:              #a94442;\n@state-danger-bg:                #f2dede;\n@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);\n\n.box-shadow(@shadow) {\n  -webkit-box-shadow: @shadow; // iOS \u003c4.3 \u0026 Android \u003c4.1\n          box-shadow: @shadow;\n}\n\n.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {\n  // Color the label and help text\n  .help-block,\n  .control-label,\n  .radio,\n  .checkbox,\n  .radio-inline,\n  .checkbox-inline,\n  \u0026.radio label,\n  \u0026.checkbox label,\n  \u0026.radio-inline label,\n  \u0026.checkbox-inline label  {\n    color: @text-color;\n  }\n  // Set the border and box shadow on specific inputs to match\n  .form-control {\n    border-color: @border-color;\n    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work\n    \u0026:focus {\n      border-color: darken(@border-color, 10%);\n      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);\n      .box-shadow(@shadow);\n    }\n  }\n  // Set validation states also for addons\n  .input-group-addon {\n    color: @text-color;\n    border-color: @border-color;\n    background-color: @background-color;\n  }\n  // Optional feedback icon\n  .form-control-feedback {\n    color: @text-color;\n  }\n}\n\n// Feedback states\n.has-success {\n  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);\n}\n.has-warning {\n  .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);\n}\n.has-error {\n  .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);\n}\n```\n\nScss:\n```scss\n$state-success-text:             #3c763d;\n$state-success-bg:               #dff0d8;\n$state-success-border:           darken(adjust_hue($state-success-bg, -10), 5%);\n\n$state-info-text:                #31708f;\n$state-info-bg:                  #d9edf7;\n$state-info-border:              darken(adjust_hue($state-info-bg, -10), 7%);\n\n$state-warning-text:             #8a6d3b;\n$state-warning-bg:               #fcf8e3;\n$state-warning-border:           darken(adjust_hue($state-warning-bg, -10), 5%);\n\n$state-danger-text:              #a94442;\n$state-danger-bg:                #f2dede;\n$state-danger-border:            darken(adjust_hue($state-danger-bg, -10), 5%);\n\n@mixin box-shadow($shadow) {\n  -webkit-box-shadow: $shadow; // iOS \u003c4.3 \u0026 Android \u003c4.1\n          box-shadow: $shadow;\n}\n\n@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {\n  // Color the label and help text\n  .help-block,\n  .control-label,\n  .radio,\n  .checkbox,\n  .radio-inline,\n  .checkbox-inline,\n  \u0026.radio label,\n  \u0026.checkbox label,\n  \u0026.radio-inline label,\n  \u0026.checkbox-inline label  {\n    color: $text-color;\n  }\n  // Set the border and box shadow on specific inputs to match\n  .form-control {\n    border-color: $border-color;\n    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work\n    \u0026:focus {\n      border-color: darken($border-color, 10%);\n      $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);\n      @include box-shadow($shadow);\n    }\n  }\n  // Set validation states also for addons\n  .input-group-addon {\n    color: $text-color;\n    border-color: $border-color;\n    background-color: $background-color;\n  }\n  // Optional feedback icon\n  .form-control-feedback {\n    color: $text-color;\n  }\n}\n\n// Feedback states\n.has-success {\n  @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);\n}\n.has-warning {\n  @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);\n}\n.has-error {\n  @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);\n}\n```\n\n## 转换函数\n\n### 字符串函数\n\n* 转换 CSS 转义函数，也就是：~\"xxx\"\n\nLess:\n```less\n@input-border-focus:             #66afe9;\n\n.box-shadow(@shadow) {\n  -webkit-box-shadow: @shadow; // iOS \u003c4.3 \u0026 Android \u003c4.1\n  box-shadow: @shadow;\n}\n\n.form-control-focus(@color: @input-border-focus) {\n  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);\n  \u0026:focus {\n    border-color: @color;\n    outline: 0;\n    .box-shadow(~\"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}\");\n  }\n}\n\n.form-control {\n  .form-control-focus();\n}\n```\n\nScss:\n```scss\n$input-border-focus:             #66afe9;\n\n@mixin box-shadow($shadow) {\n  -webkit-box-shadow: $shadow; // iOS \u003c4.3 \u0026 Android \u003c4.1\n  box-shadow: $shadow;\n}\n\n@mixin form-control-focus($color: $input-border-focus) {\n  $color-rgba: rgba(red($color), green($color), blue($color), .6);\n  \u0026:focus {\n    border-color: $color;\n    outline: 0;\n    @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba});\n  }\n}\n\n.form-control {\n  @include form-control-focus();\n}\n```\n\n### 颜色函数\n* 将 Less 的 spin() 函数转换为 Scss 的 adjust_hue() 函数\n\nLess:\n```less\n@state-success-border:           darken(spin(@state-success-bg, -10), 5%);\n```\n\nScss:\n```scss\n$state-success-border:           darken(adjust_hue($state-success-bg, -10), 5%);\n```\n\n## 转换 @import At-Rules\n\nLess:\n```less\n@import \"foo\";\n@import \"foo.less\";\n@import \"foo.php\";\n@import \"foo.css\";\n```\n\nScss:\n```scss\n@import \"foo\";\n@import \"foo\";\n@import \"foo\";\n@import \"foo.css\";\n```\n\n## 如果使用 postcss-less2scss 插件\n\n```js\nconst postcss = require('postcss')\nconst syntax = require('postcss-less')\nconst converter = require('postcss-less2scss')\n\nconst lessText = `\n// Variables\n@link-color:        #428bca; // sea blue\n@link-color-hover:  darken(@link-color, 10%);\n\n// Usage\na,\n.link {\n  color: @link-color;\n}\na:hover {\n  color: @link-color-hover;\n}\n.widget {\n  color: #fff;\n  background: @link-color;\n}\n`\nconst scssText = postcss([converter])\n  .process(lessText, { syntax })\n  .css\nconsole.log('lessText = ', lessText, ', \\nscssText = ', scssText)\n```\n\n### 和 gulp 集成\n```javascript\n/**\n * Use postcss-less2scss to convert bootstrap v3.3.7 styles from less to scss\n */\ngulp.task('less2scss', () =\u003e {\n  return gulp.src('assets/less/bootstrap3/**/*.less')\n    .pipe(postcss([less2scss], {\n      syntax: less\n    }))\n    .pipe(rename(path =\u003e {\n      if (path.basename !== 'bootstrap') {\n        path.basename = '_' + path.basename\n      }\n      path.extname = '.scss'\n    }))\n    .pipe(gulp.dest('build/scss/bootstrap3/'))\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftfanme%2Fpostcss-less2scss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftfanme%2Fpostcss-less2scss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftfanme%2Fpostcss-less2scss/lists"}