minddust / bootstrap-progressbar

progressbar interactions for twitter bootstrap 2 & 3
www.minddust.com/project/bootstrap-progressbar
MIT License
577 stars 160 forks source link

Converted to SCSS, using "less2sass" tool with command: #46

Closed shehi closed 9 years ago

shehi commented 9 years ago

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!

shehi commented 9 years ago

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!

minddust commented 9 years ago

hey @shehi

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

shehi commented 9 years ago

@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 commented 9 years ago

@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 commented 9 years ago

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

minddust commented 9 years ago

@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 commented 9 years ago

@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 commented 9 years ago

@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 commented 9 years ago

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 commented 9 years ago

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