Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Nov 28, 2019. It is now read-only.

Conversation

@shehi
Copy link
Contributor

@shehi shehi commented Feb 23, 2015

Hey there. I need SCSS files for this project, since my own project is SCSS based rather than LESS.

I used less2sass tool for conversion, using following shell command:

while read FILE; do less2sass $FILE ${FILE/less/scss}; done <<< `find . -name "*.less"  | grep -Po "(?>[a-z])([\S]+\.less)"`

However, my IDE (PHPStorm, one of the best) warned me about a specific type of SCSS syntax error, which inherently came from your LESS code. The error is the following: the lines with mixins, like: #gradient > .striped(); got converted as #gradient > @include striped(); which is incorrect format for SCSS. Since I don't know LESS (I use SCSS/SASS), I have no idea what that line:

#gradient > @include striped();

actually means. Which child of #gradient are you applying that mixin to? Please help me with this one and I will fix the error and complete the patch. Thanks!

while read FILE; do less2sass $FILE ${FILE/less/scss}; done <<< `find . -name "*.less"  | grep -Po "(?>[a-z])([\S]+\.less)"`
@shehi
Copy link
Contributor Author

shehi commented Feb 23, 2015

Oh man, those are namespaces: a nightmare introduced by LESS. Scenario like:

#font {
  #family {
    .serif() {
      font-family: Georgia, "Times New Roman", Times, serif;
    }
    .sans-serif() {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .monospace() {
      font-family: Menlo, Monaco, "Courier New", monospace;
    }
  }
  .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    #font > #family > .serif;
    #font > .shorthand(@size, @weight, @lineHeight);
  }
  .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    #font > #family > .sans-serif;
    #font > .shorthand(@size, @weight, @lineHeight);
  }
  .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    #font > #family > .monospace;
    #font > .shorthand(@size, @weight, @lineHeight);
  }
}

completely makes it hard to convert, as serif() mixin name there is used twice in different namespaces. Dammit!

@shehi shehi closed this Feb 23, 2015
@minddust
Copy link
Owner

hey @shehi

nevertheless it's a nice idea to provide scss. i will add them in the next version. thanks

@shehi
Copy link
Contributor Author

shehi commented Feb 24, 2015

@minddust That would be extremely awesome mate! My Laravel powered open-source package is using CSS packages as SCSS to automate CSS management. That's why I am in dire need of SCSS format. I will be watching this package for possible updates. Feel free to use less2sass package and the shell command I provided above for autoconversion. From there on, you can easily make subtle updates to fix small errors here and there. Good luck mate!

@minddust
Copy link
Owner

@shehi it has to wait till 4.3. have a deadly deadline to fulfil ;) will take a look at less2sass and ping you when it's done. cheers

@shehi
Copy link
Contributor Author

shehi commented Mar 16, 2015

@minddust Sure mate, I will be watching as well. Good luck!

@minddust
Copy link
Owner

minddust commented Apr 4, 2015

@shehi got a little late but here you go! v0.8.5 is out. pls tell me if you notice something wrong with the scss version. cheers

@shehi
Copy link
Contributor Author

shehi commented Apr 6, 2015

@minddust Thanks mate. So far it seems to work, but didn't you need to convert files inside /resources folder?! What do SCSS files use for variables, mixins etc without those resources?

@minddust
Copy link
Owner

minddust commented Apr 6, 2015

@shehi there is no need to provide a sass version of them because the files inside /resources are only used to generate the compiled css files. if someone wants to use less or sass he/she already has and should use their own corresponding bootstrap/boostrap-sass framework. this project only offers additional styles for bootstrap - not bootstrap itself. all missing/needed files are provided by bootstrap. e.g.:

shell

bower install bootstrap-sass#3.3.4
bower install bootstrap-progressbar#0.8.5

my_own_progressbar.scss

@import "bower_components/bootstrap/assets/stylesheets/_bootstrap.scss"
@import "bower_components/bootstrap-progressbar/scss/bootstrap-progressbar-3.3.0-3.x.x.scss"
$progressbarVerticalWidth = 50px;
// profit

@shehi
Copy link
Contributor Author

shehi commented Apr 6, 2015

So those were original Bootstrap resources unrelated to this project?! Man, you should've told me so earlier. I wouldn't try converting resource-files and just would've converted those 4 files :) Arghhhh...

Thanks nevertheless for the great work! Have a good day!

@minddust
Copy link
Owner

minddust commented Apr 6, 2015

they are ignored in bower - thought this was obvious :D maybe i should mention/explain that in the readme. cheers stephan

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants