Is there any library available around to manipulate CSS files like the Hpricot for HTML/XML etc.
I have a lot of CSS files for different theme, and sometime for a minor change I need to open each CSS file and make that change.
I want to do it programmatically, preferably in Ruby.
Thanks,
Imran
Have you taken a look at less or Sass? They probably aren't quite what you're looking for--but they are both languages that compile to CSS and use cleaner syntax and other benefits like variables.
Related
I am creating a website using Drupal 8 and I found a free theme online which I have installed on my site. The theme consists of multiple folders of CSS files. I would like to use SASS to extend and modify this theme. If I want to do this, is it as simple as renaming all the files to SCSS files and compile using Gulp or Compass? Or is there a better practice to follow? Any guidance would be appreciated. Thanks!
There's no need to make any kind of conversion.
You can just change the file extension if you need to.
The SCSS syntax uses the file extension .scss. With a few small
exceptions, it’s a superset of CSS, which means essentially all valid
CSS is valid SCSS as well. Because of its similarity to CSS, it’s the
easiest syntax to get used to and the most popular.
From https://sass-lang.com/documentation/syntax
I'm trying to customize the design of my ionic app, I don't know much about SASS, but based upon my research, most people have suggested or are customizing the defaults of ionic through the scss files. Since I don't know much about SASS, I was wondering if its safe to make changes to ionic's defaults through the ionic.css file.
Yes it is "safe" as long as you plan to never use sass! If you use sass it will overwrite what's in the ionic.css file.
Having said that, you should really just use sass as it will make your life a lot easier. You don't need to learn anything new to use sass because writing normal css in a sass file will work just fine.
You can then add bits of sass as you progress and pick them up.
I am a pure designer, so I totally new to the field of front-end development.
I have learned what is LESS, what is SASS.
But when I open a HTML template, there are some LESS or SCSS files, but also a lot of CSS files. I am quite confused what's the relationship between LESS/SCSS and CSS?
If LESS/SCSS is so good to use why people still write 10 thousand lines in CSS file, which is impossible for me to read through..?
Are those CSS files like "bootstrap.css" or "animate.min.css" just libraries for LESS/SCSS to use? Or what other relationship between them?
A lot of frameworks ship with not only the LESS and SASS files, but also the results of those files (the exported CSS files). In the case of Bootstrap, this is particularly true: none of the ".css" files are libraries for the LESS. They are the result.
The authors of these frameworks assume that some people want the LESS/SASS workflow, and others want to include the CSS and be done with it. So they include it all. In many cases, the ill-documented sprawling CSS files are actually demonstrating that the assumption about LESS ("so good to use") is not always true. Writing CSS without a preprocessor and with best practices will more often result in a smaller more readable (and well-documented) file than a LESS/SASS-based workflow.
Having spent some time with LESS, I think I might be ready to move back to straight-up CSS.
As stated by Rob Dodson, style tags are now unavoidable with Web Components. I am trying to find a way to use LESS with this new tecnhology without having to paste the compiled CSS in my HTML document everytime I change something in the LESS file . Is there anyway to achieve that?
I am using Polymer.
Thanks!
Laurent
You can make the client compile the LESS to CSS , you should definitely take a look at this :
http://lesscss.org/#client-side-usage
It is advised to compile it yourself to css in a production environment though !
Doing this client-side hardly seems like the corrent solution, especially at scale. For instance, do you really want 1000 web components in your app all including LessCSS and compiling on the client side?
Just compile server-side and include the compiled version in your html import. Apps like DocPad, make this a lot easier. For instance:
src/documents/components/my-component/my-component.css.less is your source file, and is compiled to out/components/my-component/my-component.css, which is accessible at /compoennt/my-component/my-component.css.
We use this workflow to also make use of javascript pre-processors like coffeescript, as well as post-processors like css auto prefixer, and bundlers like Browserify. See: https://stackoverflow.com/a/23050527/130638 for more info.
Simply compile your less and embed the generated CSS file via good old link tag.
I don't think that rob wanted to say that using style tags is the only way to go. You can still link to external stylesheets as you always did.
Why don´t you compile on server side using php compiler? Have a look here - http://leafo.net/lessphp/ -
To let you know, i´m using this compiler on my projects, on the server side without any kind of problems!!!!!!! :) IMO, it´s better to have the compilation work on the server side. I´m not totally 100% sure, but i think IE8 don´t recognize text/less
The way I have done this before is have individual .less or .scss file for each component and have it compile into the individual .css file which is then called into the respective component file. and finally vulcanize everything into a single file.
Incase you want to use a single CSS file, then use //deep// combinator or ::shadow pseudo elements in the CSS.
If you able to create the custom elements without using ShadowDOM then you can simply have all your less merge into a single CSS.
Honestly speaking I was unable to create a wc without shadowDOM in polymer. There is a long conversation on github on enabling / disabling and hacking a way to create a wc without shadowDOM here https://github.com/Polymer/polymer/issues/222
One solution would be to have the preprocessor translate .less files into .css and then linking them inside Polymer components, like explained in the official documentation: https://www.polymer-project.org/1.0/docs/devguide/styling#external-stylesheets
Unfortunately this is deprecated. So the other way to go could be to have another step that wraps the preprocessor-generated css files with a dom-module: this way you can follow the Polymer way including the style module inside your components, or using the css file compiled from less if you do things outside Polymer components.
I'm using Gulp for my build process and I found this module very useful:
https://github.com/MaKleSoft/gulp-style-modules
It creates, for every .less file I have in my sources, an .html file with a dom-module wrapped around it, ready to be included in the components' styles.
I am attempting to use lesscss to build a templating system where each template has 3 or 4 alternative colour schemes.
So for example, I could have a red.less stylesheet that looks like this:
#main_colour: #ff0000;
#import 'main.less';
So, I only have one main.less stylesheet to maintain which contains all the main styles, and uses the variables set for colour codes. I can then create a seperate colour.less file for each colour scheme.
Only problem is when I try to do this I get a Less::VariableNameError which indicates that LESS is parsing the #imports BEFORE it parses the variables.
Is there a workaround to this or any other way to achieve the same end result?
In reference to your tweet, yes, this would work as you expect in Sass. I'm actually kind of surprised that it doesn't work in Less.
I guess the Less guys wanted to keep the .Less file atomic and independent of external environmental settings. This was what I assumed, but I also didn't like it so our .NET port http://www.dotlesscss.com will allow you to do this by default.
Its not a big change to do in the original Less ruby version and if you fancy tinkering with the source I can point you in the right direction.
Out of interest, without been traitorous to the Less team I quite like the SASS syntax now and there are additional things such as conditional statements and loops that you cant (yet) do with Less.
#nex3 - you guys should stop competing and just work together.
Seems like this isn't a problem any more, or at least not for me using "dotless" for .net?
Seems to work fine now with latest LESS.