.session {
  &.session-20150403 {
    title: Compose elegant CSS with Less;
    location: Teambition Meeting Room;
    members: Teambition F2E Group;
  }
}

Sune Bear
2015-04-03

Why Less

Let's to learn
CSS popular pre-processors first

{ Code Compare }

// Variables – Sass
$colorPrimary: #333;
$siteWidth: 960px;
body {
  color: $colorPrimary;
  width: $siteWidth;
}

// Variables – Less
@colorPrimary: #333;
@siteWidth: 960px;
body {
  color: @colorPrimary;
  width: @siteWidth;
}

// Variables – Stylus
colorPrimary #333
siteWidth 960px
body
  color colorPrimary
  width siteWidth
  
// Variables – Stylus 2th
colorPrimary = #333
siteWidth = 960px
body
  color: colorPrimary
  width: siteWidth
  
// Nesting - Sass/Less
nav {
  ul {
    li {
      a {
      }
    }
  }
}
// Nesting - stylus
nav
  ul
    li
      a
      
// Like jade : )

// @import – Sass/Less
@import "setup";
@import "reset";
@import "base";
@import "layout";
@import "typography";
@import "theme";
// @import – Stylus
@import "setup"
@import "reset"
@import "base"
@import "layout"
@import "typography"
@import "theme"

// Mixin – Sass
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(5px);
}

// Mixin – Less
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.box {
  .border-radius(5px);
}

// Mixin – Stylus
border-radius (radius)
  -webkit-border-radius radius
  -moz-border-radius radius
  border-radius radius
  
.box
  border-radius(5px)
  
// Functions – Sass
$g-c: 12;
$g-w: 960px;

@function calculate-column-width($cols) {
  @return (($g-w / $g-c) * $cols / $g-w) * 100%
}

aside {
  width: calculate-column-width(4);
}

// Functions – Less
@g-c: 12;
@g-w: 960px;

.calculate-column-width(@cols) {
  width: (((@g-w / @g-c) * @cols / @g-w) * 100%);
}

aside {
  .calculate-column-width(4);
}

// Functions – Stylus
g-c 12
g-w 960px

calculate-column-width(cols)
  ((g-w / g-c) * cols / g-w) * 100%
  
aside
  width calculate-column-width(4)
  
// Control Directives – Sass
@if
@else if
@else
@then
@for
@each
@while

// Control Directives – Less
when
// Are you kidding? Σ( ° △ °|||)︴

// Control Directives – Stylus
else if
else
unless
for

“In my opinion”

Sass is earliest, lots of library support


Less is most simple, can run in browser


Stylus is most powerful, Syntax like Jade


Every pre-compiled language has its advantages,
So I can't answer the question that about "Why Less".
Maybe it's fate~

Stop it!

Start topic

SMACSS & OOCSS

SMACSS is more style guide than rigid framework

The core of SMACSS


{ SMACSS example }

// Base - SMACSS
body, form {
    margin: 0;
    padding: 0;
}
a:active,
a:hover {
  outline: 0;
}
// CSS Resets are a subset of the base
// Normalize.css different with CSS Resets

// Layout - SMACSS
.site-header {}
.site-main {
  .main-sidebar {}
  .main-body {}
}
.site-footer {}
// Using with gird system is much better

 

<div class="card materials-wrap">
  <div class="list-group flds">
    <div class="list-group-item fld">
      <span class="fld-name">Folder Name</span>
      <span class="fld-items">(32 items)</span>
    </div>
  </div>
</div>

 

// Module - SMACSS
// Base module in uis/list.less
.list-group {}
.list-group-item {}
// Logical module in components/subtype/flds.less
// Logical module extend base module
.flds {}
.fld {
  .fld-name {}
  .fld-items {}
}
// Instance in page/controller/view.less
.materials-wrap {
  .flds {}
  .fld {}
}

// State - SMACSS
// Global state
.is-bfc {
  overflow: hidden;
}
// Combining State Rules with Modules
.tab {
    background-color: purple;
    &.is-active {
      background-color: white;
    }
}

// Theme - SMACSS
// Theme is not necessary
// in module-name.less
.mod {
    border: 1px solid;
}
// in theme.less
.mod {
    border-color: blue;
}

// Theme - SMACSS
// Use variables control theme
// in variables.less
@color-primray: blue;
// in module-name.less
.mod {
    border: 1px solid @color-primray;
}

OOCSS only has two principles

Bootstrap is best practice

— of —

SMACSS & OOCSS

 

<div class="btn-group">
  <a class="btn btn-dafalut">1</a>
  <a class="btn btn-primary btn-lg">2</a>
  <a class="btn btn-danger disabled">3</a>
</div>

 

// in button-groups.less
.btn-group {}
// in buttons.less
.btn {
  &.active {}
  &.disabled {}
}
.btn-default {}
.btn-primary {}
.btn-danger {}
.btn-lg {}

Why no BEM

BEM is in conflict with OOCSS

知乎：如何看待 CSS 中 BEM 的命名方式？




Guidelines

cssguidelin.es


Summary


Elegant CSS = Less + SMACSS + OOCSS + Guidelines

↓

 Pre-Processor + Framework + Linter


Discuss

Three questions


THANKS

Get Presentation