CSS & SASS & SCSS & less

CSS & SASS & SCSS & less

less vs scss

https://github.com/vecerek/less2sass/wiki/Less-vs.-Sass

https://www.smashingmagazine.com/2011/09/an-introduction-to-less-and-comparison-to-sass/

https://stackoverflow.com/questions/52003198/different-between-scss-and-less

https://www.keycdn.com/blog/sass-vs-less

https://www.ionos.com/digitalguide/websites/web-development/sass/

1. LESS is written in JavaScript so you will need NodeJS to run it.

2.To run Sass, you will need to have Ruby installed.

sass

scss

https://sass-lang.com/

https://github.com/sass

https://sass-lang.com/dart-sass

https://github.com/sass/dart-sass

less

http://lesscss.org/

https://webpack.docschina.org/loaders/less-loader/

$ npm install -g less

$ lessc styles.less styles.css

// Color Variables
@green: #2ecc71;
@lightgray: lightgray;
@background: whitesmoke;

// Layout only!
body {
  background: @background;
  h1 {
    text-align: center;
    color: gray;
  }
  h2 {
    text-align: center;
    color: gray;
  }
}

// Starts Here!

.inactiveMixin {
  content: "";
  position: absolute;
  display: block;
}

.beforeAnimation {
  -moz-transition: .2s cubic-bezier(.24, 0, .5, 1);
  -o-transition: .2s cubic-bezier(.24, 0, .5, 1);
  -webkit-transition: .2s cubic-bezier(.24, 0, .5, 1);
  transition: .2s cubic-bezier(.24, 0, .5, 1);
}

.afterAnimation {
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, .04), 0 4px 9px hsla(0, 0%, 0%, .13), 0 3px 3px hsla(0, 0%, 0%, .05);
  -moz-transition: .35s cubic-bezier(.54, 1.60, .5, 1);
  -o-transition: .35s cubic-bezier(.54, 1.60, .5, 1);
  -webkit-transition: .35s cubic-bezier(.54, 1.60, .5, 1);
  transition: .35s cubic-bezier(.54, 1.60, .5, 1);
}

// Mobile Toggle Switch
.toggleWrapper {
  margin: auto;
  padding: 20px;
  width: 55px;
  border: 1px solid @lightgray;
  margin-top: 20px;
  border-radius: 5px;
  background: white;
  input {
    &.mobileToggle {
      opacity: 0; // hides checkbox
      // opacity: 1;
      position: absolute;
      & + label {
        position: relative;
        display: inline-block;
        user-select: none;
        -moz-transition: .4s ease;
        -o-transition: .4s ease;
        -webkit-transition: .4s ease;
        transition: .4s ease;
        -webkit-tap-highlight-color: transparent;
        height: 30px;
        width: 50px;
        border: 1px solid #e4e4e4;
        border-radius: 60px;
        &:before {
          .inactiveMixin;
          .beforeAnimation;
          height: 30px;
          width: 51px;
          top: 0;
          left: 0;
          border-radius: 30px;
        }
        &:after {
          .inactiveMixin;
          .afterAnimation;
          background: @background;
          height: 28px;
          width: 28px;
          top: 1px;
          left: 0px;
          border-radius: 60px;
        }
      }
      // When Active
      &:checked {
        & + label:before {
          background: @green; // Active Color
          -moz-transition: width .2s cubic-bezier(0, 0, 0, .1);
          -o-transition: width .2s cubic-bezier(0, 0, 0, .1);
          -webkit-transition: width .2s cubic-bezier(0, 0, 0, .1);
          transition: width .2s cubic-bezier(0, 0, 0, .1);
        }
        & + label:after {
          left: 54px - 30px;
        }
      }
    }
  }
}

https://codepen.io/xgqfrms/pen/BgYaeM

refs

https://github.com/xgqfrms-GitHub/Sass/tree/master/Tutorial#伪类-hover-伪元素before--after

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---