Hate waiting for SASS compiling your stylesheets with Compass over 10 seconds everytime? C6 helps you write style sheets with efficiency.
C6 is a SASS 3.2 compatible implementation written in Go. But wait! this is not only to implement SASS, but also to create a new language for better consistency, syntax and performance. And yes, this means we're free to accept new language feature requests.
Setup GOPATH:
source goenv
Setup dependencies:
source goinstall
Run tests:
go test c6
go test -v c6
go test -v c6/ast
To run specific test
go test -run TestParser -x -v c6
C6 project source does not depend on the import path github.com/c9s/c6
,
therefore the project needs to be built standalone.
The reason of using goenv
instead go get
is:
If any dependent package API changed on master, everything will be broken when user runs go get. Therefore we control the package dependency we used by using goenv: install packages on specific tag or branch. This is to prevent unexpected results while we need to build stable application for users.
The other reason of not using github.com/c9s/c6
as our import path is:
We host c6 project source code in a private repository, hence the private build process shouldn't depend on
github.com/...
. The remote import path restricts the flexibility of our build process.
If you need to build your application with c6, you need to clone the repository into your GOPATH manually:
git clone https://github.com/c9s/c6.git vendor/c6
export GOPATH=vendor/c6:$GOPATH
-
Lexing
-
@import
- simple selector.
- type selector.
- child selector.
- attribute selector.
- adjacent selector.
- descendant selector.
- class selector.
- ID selector.
- Ruleset
- Sub-ruleset
- Interpolation
- Property name
- Property value list
- Nested properties.
- Comma-separated list
- Space-separated list
-
@if
,@else
,@else if
-
@for
,from
,through
statement -
@while
-
@mixin
-
@mixin
with arguments -
@include
- Flags:
!default
,!important
,!optional
,!global
- Hex color
- Functions
- Vendor prefix properties
- MS filter.
progid:DXImageTransform.Microsoft....
- Variable names
- Variable assignment
- Time unit support.
s
second,ms
... etc - Angle unit support.
- Resolution unit support.
- Unicode Range support: https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-range
- Media Query
-
-
Built-in Functions
- .... to be listed
-
Parser
- Parse
@import
- Parse Expr
- Parse Space-Sep List
- Parse Comma-Sep List
- Parse Map (tests required)
- Parse Selector
- Parse Selector with interpolation
- Parse RuleSet
- Parse DeclBlock
- Parse Variable Assignment Stmt
- Parse PropertyName
- Parse PropertyName with interpolation
- Parse PropertyValue
- Parse PropertyValue with interpolation
- Parse conditions
- Parse
@media
statement - Parse Nested RuleSet
- Parse Nested Properties
- Parse options:
!default
,!global
,!optional
- Parse CSS Hack for different browser (support more syntax sugar for this)
- Parse
@font-face
block - Parse
@if
statement - Parse
@for
statement - Parse
@while
statement - Parse
@mixin
statement - Parse
@include
statement - Parse
@function
statement - Parse
@return
statement - Parse
@extend
statement - Parse keyword arguments for
@function
- Parse
@switch
statement - Parse
@case
statement - Parse
@use
statement
- Parse
-
Building AST
- RuleSet
- DeclBlock
- PropertyName
- PropertyValue
- Comma-Separated List
- Space-Separated List
- Basic Exprs
- FunctionCall
- Expr with interpolation
- Variable statements
- Built-in color keyword table
- Hex Color computation
- Number operation: add, sub, mul, div
- Length operation: number operation for px, pt, em, rem, cm ...etc
- Expr evaluation
- Boolean expression evaluation
- Media Query conditions
-
@if
If Condition -
@else if
If Else If -
@else
else condition -
@while
statement node -
@function
statement node -
@mixin
statement node -
@include
statement node -
@return
statement node -
@each
statement node
-
Runtime
- HSL Color computation
- Function Call Invoke mech
- Mixin Include
- Import
-
SASS Built-in Functions
- RGB functions
-
rgb($red, $green, $blue)
-
rgba($red, $green, $blue, $alpha)
-
red($color)
-
green($color)
-
blue($color)
-
mix($color1, $color2, [$weight])
-
- HSL Functions
-
hsl($hue, $saturation, $lightness)
-
hsla($hue, $saturation, $lightness, $alpha)
-
hue($color)
-
saturation($color)
-
lightness($color)
-
adjust-hue($color, $degrees)
-
lighten($color, $amount)
-
darken($color, $amount)
-
saturate($color, $amount)
-
desaturate($color, $amount)
-
grayscale($color)
-
complement($color)
-
invert($color)
-
- Opacity Functions
-
alpha($color) / opacity($color)
-
rgba($color, $alpha)
-
opacify($color, $amount) / fade-in($color, $amount)
-
transparentize($color, $amount) / fade-out($color, $amount)
-
- Other Color Functions
-
adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
-
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
-
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
-
ie-hex-str($color)
-
- String Functions
-
unquote($string)
-
quote($string)
-
str-length($string)
-
str-insert($string, $insert, $index)
-
str-index($string, $substring)
-
str-slice($string, $start-at, [$end-at])
-
to-upper-case($string)
-
to-lower-case($string)
-
- Number Functions
-
percentage($number)
-
round($number)
-
ceil($number)
-
floor($number)
-
abs($number)
-
min($numbers…)
-
max($numbers…)
-
random([$limit])
-
- List Functions
-
length($list)
-
nth($list, $n)
-
set-nth($list, $n, $value)
-
join($list1, $list2, [$separator])
-
append($list1, $val, [$separator])
-
zip($lists…)
-
index($list, $value)
-
list-separator(#list)
-
- Map Functions
-
map-get($map, $key)
-
map-merge($map1, $map2)
-
map-remove($map, $keys…)
-
map-keys($map)
-
map-values($map)
-
map-has-key($map, $key)
-
keywords($args)
-
- Selector Functions
- .... to be expanded ...
- RGB functions
-
CodeGen
- CompactCompiler
- CompileCssImportStmt:
@import url(...);
- CompileRuleSet
- CompileSelectors
- CoimpileParentSelector
- CompileSubRuleSet
- CompileCommentBlock
- CompileDeclBlock
- CompileMediaQuery:
@media
- CompileSupportrQuery:
@support
- CompileFontFace:
@support
- CompileForStmt
- CompileIfStmt
- CompileElseIfStmt
- CompileWhileStmt
- CompileEachStmt
- ... list more ast nodes here ...
- CompileCssImportStmt:
- CompactCompiler
-
Syntax
- built-in
@import-once
- built-in
The original SASS is written in Ruby and it's really slow, we take 11 seconds to compile the stylesheets of our application, libsass is fast but it does not catch up the ruby sass implementation , and you can't compile them with Compass. Since Go is simple, easy & fast, thus we implement SASS in Go to move faster.
Further, we want to design a new language (ECSS temporarily named) that is compatible with SASS 3.4 or even SASS 4.0 with more powerful features.
SASS Reference http://sass-lang.com/documentation/file.SASS_REFERENCE.html
A feature check list from libsass:
Grammar Ambiguity:
- https://www.facebook.com/cindylinz/posts/10202186527405801?hc_location=ufi
- https://www.facebook.com/yoan.lin/posts/10152968537931715?_rdr
Standards:
- CSS Syntax Module Level 3 http://www.w3.org/TR/css-syntax-3
- CSS 3 Selector http://www.w3.org/TR/css3-selectors/#grouping
- CSS Font http://www.w3.org/TR/css3-fonts/#basic-font-props
- Selectors API http://www.w3.org/TR/selectors-api/
- At-Page Rule http://dev.w3.org/csswg/css-page-3/#at-page-rule
- Railroad diagram https://github.com/tabatkins/railroad-diagrams
- CSS 2.1 Grammar http://www.w3.org/TR/CSS21/grammar.html
SASS/CSS Frameworks, libraries:
- Bourbon http://bourbon.io/
- Marx https://github.com/mblode/marx
- FormHack http://formhack.io/
- Susy http://susy.oddbird.net/
- Gumby http://www.gumbyframework.com/
Articles:
- Logic in media queries - https://css-tricks.com/logic-in-media-queries/
Please open up an issue on GitHub before you put a lot efforts on pull request.
The code submitting to PR must be filtered with gofmt
-
Slack: we are on Slack channel
#c6
, go invite yourself here: https://docs.google.com/forms/d/11KpalZc6AUuQYf7vz531ys0pLEC9csjkC6QyC_hJQEg/viewform -
Our Official Twitter Channel: https://twitter.com/C6SASS
MPL License https://www.mozilla.org/MPL/2.0/
(MPL is like LGPL but with static/dynamic linking exception, which allows you to either dynamic/static link this library without permissions)