Code Monkey home page Code Monkey logo

sass2scss's Introduction

sass2scss

Build Status

C++ tool/library to convert indented sass syntax to the newer scss syntax. This was initially a port of a previous perl implementation. Its primary intention was to bring indented sass syntax support to libsass. sass2scss is included in libsass since version 2.0.

Unit Tests

I added around 60 unit tests for sass2scss to the libsass perl binding CSS-Sass.

Command Line Utility

sass2scss [options] < file.sass
-p, --pretty       pretty print output
-c, --convert      convert src comments
-s, --strip        strip all comments
-k, --keep         keep all comments
-h, --help         help text
-v, --version      version information

The source Sass is read from stdin and the resulting SCSS is printed to stdout.

--pretty can be repeated up to 3 times to add even more linefeeds (lf).

  • 0: Write everything on one line (minimized)
  • 1: Add lf after opening bracket (lisp style)
  • 2: Add lf after opening and before closing bracket (1TBS style)
  • 3: Add lf before/after opening and before closing (allman style)

The lisp style is the only output style that should not alter the line count of the input file. This is the best option if you still want to use source-maps, since it should only change the source by a few inserted chars. So far sass2scss does not produce source-maps and libsass will not be able to produce 100% accurate source-maps for indented sass syntax input files!

Compile and Install

If you want to use this lib from another C project, you can just add the source files to your project. To compile and install the utility we have added a very simple Makefile. On unix systems this normally involves the following steps:

git clone https://github.com/mgreter/sass2scss
# alternatively you may fetch and extract an archive from github
# wget https://github.com/mgreter/sass2scss/archive/master.tar.gz && tar master.tar.gz
cd sass2scss # adjust name if you downloaded an archive 
make # or i.e. `mingw32-make` or `dmake` on windows
./sass2scss --help # binary is built in same directory
sudo cp -a sass2scss /usr/bin # to install it system wide

Use examples

The original Sass file, called styles.sass:

#main
  // This is the best color since it has a specific meaning
  color: rebeccapurple
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka
  font-size: 75%

For example with default options, running

sass2scss < styles.sass > styles.scss

Would result the file styles.scss to look like:

#main { color: rebeccapurple;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka;font-size: 75%; }

When adding options for pretty printing (-p) and keeping comments (-k):

#main {
  // This is the best color since it has a specific meaning
  color: rebeccapurple;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka;
  font-size: 75%; }

With two pretty (-p -p) and comment conversion (-c) options, the output becomes:

#main {
  /* This is the best color since it has a specific meaning */
  color: rebeccapurple;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka;
  font-size: 75%;
}

License

Licensed under the MIT License.

Copyright (c) Marcel Greter

sass2scss's People

Contributors

ausi avatar averms avatar bowd avatar glebm avatar hamptonmakes avatar mgreter avatar paazmaya avatar pdufour avatar xzyfer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

sass2scss's Issues

Require a space after a colon

Seems that the current behaviour of Ruby Sass vs libSass/sass2scss is different in regards requiring a space after a colon :.

For example a valid syntax in both:

.very-secret
  display: none

Invalid in Ruby Sass, while libSass via sass2scss accepts:

.very-secret
  display:none

Don't support semicolons in the indented syntax

(Originally filed as sass/libsass#2652)

LibSass currently seems to allow semicolons at the end of the line in the indented syntax. This doesn't match the behavior of Ruby Sass or Dart Sass, both of which consider semicolons unknown characters in the indented syntax. Support for semicolons should be deprecated and eventually removed.

Use a constant for finding whitespace

While cleaning up my forks, I found this commit https://github.com/paazmaya/sass2scss/commit/56131397ea475db70de0ccb6cab7461c9cd75f00, which might be used to reduce the change for typing error, by using a constant in the places where whitespace is looked for.

The commit also contains using a local variable, instead of calling string position several times. There might be a reason for doing so, but if not, how about using the local variable.

I can make a PR out of that, it useful.

Support left colon bem syntax

The following

.testing
  :margin
    :bottom 32px
    :foo
      :bar 1px
      :baz 2px
    :baz 3px
  :end 4px

Should result in

.testing {
  margin-bottom: 32px;
  margin-foo-bar: 1px;
  margin-foo-baz: 2px;
  margin-baz: 3px;
  end: 4px; }

To acheive this we definitely need to keep track of the bem partial stack (to unwind it later). Indicators are if line starts with exactly one colon : followed by one identifier.

sass/libsass#1781
sass/node-sass#1300

Conversion with convert results in strange output

While building tests for https://github.com/paazmaya/grunt-sass2scss, came across strange behaviour.

The given Sass file:

/**
 * This is third file
*/
@import 'styles-2'

// Imports include the other file

label
  // Use the variable from the other file
  color: $color-white

with sass2scss -c < input.sass > output.scss, the resulted SCSS file:

/*** This is third file */*/ {}@import 'styles-2';/* Imports include the other file */label { /* Use the variable from the other file */color: $color-white; }

Semi-colons sometimes allowed

Looks like semi-colons are sometimes permitted:

$pink: #ffc3cd
$black: #000

body
  background: $pink;
  color: $black;

While in other situations, they error as expected:

@import "part";
$pink: #ffc3cd;
$black: #000;

Testing through Node-sass v0.9.3, I’d be happy to do a PR here but it looks like most of the testing is through the Perl version, right?

Regression in URL parsing.

Version v1.1.2

See sass/libsass#2637 sass/libsass#2638

input

@import url(http://fonts.googleapis.com/css?family=Limelight&subset=latin,latin-ext)

expected output

@import url(http://fonts.googleapis.com/css?family=Limelight&subset=latin,latin-ext)

actual output

@import url(http://fonts.googleapis.com/css?family=Limelight&subset=latin,"latin-ext)";

Help and version output from command line tool

Running ./sass2scss -h should provide short list of allowed options and usage example, while ./sass2scss -v should provide version information, based on possible release numbers or the given commit from which the current binary has been build.

Strange output when UTF-8 BOM is present

From sass/node-sass#1619

Running 7709939

m.saper.info> /home/saper/sw/sass2scss/sass2scss --version
v1.1.2-7-g7709
m.saper.info> git clone https://github.com/saper/node-sass-issue-1619/
Cloning into 'node-sass-issue-1619'...
remote: Enumerating objects: 7, done.
remote: Counting objects: 100% (7/7), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 7 (delta 2), reused 7 (delta 2), pack-reused 0
Unpacking objects: 100% (7/7), done.
m.saper.info> cd node-sass-issue-1619/
m.saper.info> git branch
* pure-utf-8
m.saper.info> /home/saper/sw/sass2scss/sass2scss < _config.sass | hd
00000000  24 62 61 63 6b 67 72 6f  75 6e 64 3a 20 62 6c 61  |$background: bla|
00000010  63 6b 3b                                          |ck;|

00000013
m.saper.info> /home/saper/sw/sass2scss/sass2scss < _config.sass | hd
m.saper.info> git checkout utf-8-bom
Branch 'utf-8-bom' set up to track remote branch 'utf-8-bom' from 'origin'.
Switched to a new branch 'utf-8-bom'
m.saper.info> vi _config.scss       
m.saper.info> /home/saper/sw/sass2scss/sass2scss < _config.sass | hd
00000000  ef bb bf 20 7b 7d 24 62  61 63 6b 67 72 6f 75 6e  |... {}$backgroun|
00000010  64 3a 20 62 6c 61 63 6b  3b                       |d: black;|
00000019

BOM should be banned, but maybe this should be somehow handled. In the end libsass complains:

m.saper.info> /home/saper/sw/libsass/sassc/bin/sassc -v
sassc: 3.6.1
libsass: 3.6.2
sass2scss: 1.1.1
sass: 3.5
m.saper.info> /home/saper/sw/sass2scss/sass2scss < _config.sass | /home/saper/sw/libsass/sassc/bin/sassc 
Error: Invalid CSS after "": expected 1 selector or at-rule, was "{}$background: blac"
        on line 1:1 of stdin
>>  {}$background: black;
   ^

Url in a property value taken as a comment

Perhaps due to recent changes, or not, but currently the following Sass:

@font-face
  font-family: 'Inder'
  font-style: normal
  font-weight: normal
  src: url('http://fonts/inder.eot?#iefix') format('embedded-opentype')

becomes SCSS:

@font-face {
  font-family: 'Inder';
  font-style: normal;
  font-weight: normal;
  src: url('http:; }//fonts/inder.eot?#iefix') format('embedded-opentype')

Without the // part seems to work as one would expect, valid SCSS.

Perhaps for the comment check, there should be added exclusion if the // is immediately after with :?

Incorrectly parsing + combinator as mixin

.a
  +
    .c, .b
      margin: 10px

Ruby Sass

.a + .c, .a + .b {
  margin: 10px; }

LibSass 3.3.7

Error: Invalid CSS after "  @include": expected identifier, was "{"
        on line 2 of test.sass
>>   @include  {

:checked causing error

Hi, I was directed here from sass/node-sass#1719 (comment)

Since upgrading to [email protected], which I think meant also upgrading to [email protected], I have been getting the following error:

Error: property "checked" must be followed by a ':'

with the following code:

div
  :checked ~ p
    display: none

I can fix this with:

div
  input:checked ~ p
    display: none

However, the first syntax is valid and should work (I think!). I don't know if this bug was introduced by f03b821 but it seems related. Let me know if I can help with any further info. Thanks!

Release numbers and tagging

Would it be possible to start tagging releases as this project now seems to work on a rather huge piles of Sass?

Sourcemap

Hey just wanted to check if there was a way to generate a sourcemap for the compiled SCSS file from sass2scss? I was interested in using your library to make a SASS linter on top of https://github.com/causes/scss-lint, and a sourcemap would definitely make it easier to do.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.