Is there a way to use just one file with variables and use it within a sass and a less CSS-framework?
In my react project I use semantic UI (less) and kendo react (sass). For comfortability reasons, I want to write only one file including variables like colors, paddings, gaps ...
in kendo theming is pretty easy.
I've found a way to use variables / theming within semantic too.
Here is the link
but now I can't get both frameworks working with just a single var file together as one is using sass and one less.
could find any solution online too.
// semantic site.variables
#fontName: 'Lato';
//kendo variables.scss
$niceBgColor: pink;
#width: 10px;//less
$theme1-PEOGCS:#615149;//SASS dark grey
They have different way of declaring variables and you should
completely separate LESS From SASS, for best practice.
It is bad practice to use both on the same project unless you really
have to do so.
SASS and LESS have a slightly different syntax, you would end up
having to maintain each separately.
Good practice would be for example:
Add Main Folder to project name it: SASS
File: main.scss
inside of SASS create Helper Folder name it: Helper
inside of it add these Files:
_mixins.scss,_variables.scss,_placeholder.scss
To make the code easy to maintain and reuse. Same with less(similar)
If there is a way to do what you want I don't recommend doing it, that's IF. Good luck
How many variables do you have?
The potential problems with this will be much bigger than manually maintaining two files with a dozen of variables in each.
Kendo has older, less-based themes, although of inferior quality. Semantic UI has a sass port. Even converting Semantic UI's less files yourself will be better than mixing less and sass.
Related
We currently use SASS to pre-compile CSS which consists of various SCSS files.
How does one remove the implementation of SASS so that CSS files are managed directly?
As a side question, is using SASS just personal preference or is it best practice for smallish projects? Why would I want to work in several files when I can just work out of one in a syntax that I'm familiar with?
Cheers
Just remove the sourceMappingURL in your main css will do.
You can also, should you wish, reconstruct traditional CSS by looking at what was being accomplished in the SASS files and rebuilding from scratch. This is cleaner than beginning with the compiled CSS ... but it is not for the faint-hearted: it's kind of like picking out stitches. But if the number of SASS files is few, you'll be better off.
CSS preprocessors (sass/less) were always a solution in search of a problem, in my opinion. They were likely designed by developers who were given sloppy CSS from designers who may not have had good coding practices - but in general, there is very little reason for them, and they add one more bit of unnecessary tooling. I've used them, don't like them, and will never use them again. Totally unnecessary. Good structure in one's CSS will always win.
Using sass helps you organize your code in a better way. And ease the development by using nested selectors and using mixins,variables and much more which you code once and re-use many times.
One will simply go to concerned file and change the contents easily if it divided to multiple meaningful files.
And coming to your question, you can move away from sass very simply. Generate a css file once and from next time onwards start coding in your css local copy rather than extending your sass files again . :)
If you just want to move away from SASS to return to the pure CSS, you have to use the compiled stylesheet. If you compile it via command line, then you would have got the compiled CSS. Anyway, you can use an online tool to compile it, such as this.
Once a time you have the compiled CSS, you just have to import that rather than the SASS stylesheet you've been including in the HTML previously. Just insert this in your <head>.
<link rel="stylesheet" type="text/css" href="Your pure CSS stylesheet URL">
I know Bootstrap and Foundation are CSS frameworks, but I'm not sure whether LESS and SASS are CSS frameworks or preprocessors.
What is the difference between CSS frameworks and preprocessors?
From http://lesscss.org/:
Less is a CSS pre-processor, meaning that it extends the CSS language,
adding features that allow variables, mixins, functions and many other
techniques that allow you to make CSS that is more maintainable,
themable and extendable.
From http://sass-lang.com/documentation/file.SASS_REFERENCE.html
Sass is an extension of CSS that adds power and elegance to the basic
language. It allows you to use variables, nested rules, mixins, inline
imports, and more, all with a fully CSS-compatible syntax. Sass helps
keep large stylesheets well-organized, and get small stylesheets up
and running quickly, particularly with the help of the Compass style
library.
Basically both are css pre-processors, as in they allow you to write style information that later compiles to css.
Frameworks, like bootstrap, on the other hand are more like pre-made style sheets that can be used to save development time. Rather than writing out custom sheets with similar styles over and over again, you can make use of prefabricated sheets. They usually have things like resets, basic layouts, and/or grid systems built in.
There are also some frameworks written in, and designed to be used with a pre-proccessor like Less Framework 4
If you're relatively new to this stuff, I would recommend starting with plain old css. Pre-processors can be helpful, but the learning curve is a bit steeper.
As said above, LESS and SASS allow CSS to follow the DRY(Don't Repeat Yourself) principles of coding. For example if you had a CSS file where you wanted 12 items let's say; h1, h2, h3, h4, p, a, etc all to have the same color of text(let's say a salmon color), what these preprocessors allow you to do is create a variable(let's say myColor), that you can then pass into the color attribute of each of these items.
This may not sound exciting, but where it really shines is when you want to say redesign the site or alter that color to say a 'sky blue' instead of now skimming through those 3000 lines of code to find those different items (h1, h2, ... , a, etc as listed above) you'd only need to change the myColor variable from the hex/rgb/rgba color code to the one for sky blue. Which in turn would change that value for each of those items.
So essentially you need to change 1 value that's easily found, as opposed to many, which may require a lot of sifting through code.
To note though, LESS and SASS cannot be read by a standard Internet browser, instead you must use a program that compiles your LESS/SASS code into standard CSS (these programs are easy to find and most programs such as Sublime, Brackets, Atom, etc have the functionality built in or allow a package to be downloaded that does it.)
Then when you need to edit your code, you change the LESS/SASS file and recompile again.
That's just the tip of what LESS/SASS can do, but it gives you an idea hopefully of their use. Programmers are lazy, copy and pasting isn't a good option generally, as you violate the DRY principle. So this is a happy medium explained hopefully in laymans terms.
I would have to believe I can accomplish the same results as pre-processors using jQuery(the most popular ui/ux framework).
However, depending on how many people are working on one project it may a case of teams learned in SASS or LESS scripts and may not know jQuery syntax as well. They are only focused on CSS effects, which could be a plus.
If I .addClass() to multiple DOM elements with jQuery... it may be even more efficient than having a preprocessor duplicate desired code all over a css file.
So I have this unusual situation, may be it's not Sassy way OR the right way and that's why I am asking it.
I have a main.scss which basically imports all other partials and frameworks say bootstrap. It works perfectly if all I needed was one single global CSS but I require different css files for various components and pages. One option could have been to include variables and mixins in every SASS file and compile different SASS files. Following are the reasons I didn't venture this path-
This somehow doesn't seem right, may be there is much efficient and automated way.
Not everything is coded by me or I may not have options to arrange variables and mixins locations. E.g. variables and mixins are not declared in separate files and I might not have option to re-factor.
One option which I am using is to split final compiled css using grunt and placing them in different folders but then changing images and font path is turning out to be a big trouble. I am not sure how do I use imgmin or such utilities to solve my problem neither that I am using the most efficient way to achieve what I want. I also want to avoid much complications in workflow.
Looking for some advice or tip which may help me out.
I'm not sure why you would say that compiling multiple SASS files doesn't seem right. That's how I'd approach it.
If you have a lot of variables and mixins, put the shared ones into a single file.
_shared.scsc:
$blue: #3b97c6;
$grey: #e6e6e6;
#mixin my_mixin {
// ...
}
Then just have your multiple SASS files (without the underscore so that they get compiled individually).
sass1.scss
#import "_shared";
// stuff only for sass-1
sass2.scss
#import "_shared";
// stuff only for sass-2
sass3.scss
#import "_shared";
// stuff only for sass-3
Am I misunderstanding something?
Lets say that youre using Twitter Boostrap and you have their generic boostrap.css and other boostrap associated css files, and you want your own classes to have identical attributes to some of the given boostrap classes. To my understanding, you would not want to directly modify the css bootstrap files, but you would want to extend them by creating a custom.css file.
So without touching the boostrap files. How would I replicate a boostrap class for my own class? Would the only way be to copy and paste from the boostrap.css file. Or is there a way to do
.myownclass {
-- some command to replicate class 'alert alert-error' without repeating the CSS that has already been written
}
You could use a css preprocessor. Other ways already cited by other users are fine but using a css preprocessor is the best way.
Bootstrap is built using LESS, so you can use LESS. Take a look at here: http://bootstrap.lesscss.ru/less.html.
Also SASS can be used. According to me SASS is better. You find a tutorial here: http://www.1stwebdesigner.com/css/build-website-using-twitter-bootstrap-sass-1/
What are CSS preprocessors?
A browser can only understand CSS, as the styling technique for any DOM element being rendered. CSS, as a language has its own feature set, which at times might not be enough to create a clean and reusable chunk of rules. Eg. Not being able to reuse a collection of rules in multiple selectors, unavailability of variables which may lead to ambiguous pieces of data across the stylesheet. To overcome most of these limitations, the concept of a preprocessor was born – offering an advanced way of writing CSS, which extends the basic functionalities. This advanced code is later compiled as normal CSS code using respective compilers (which depends on what preprocessor you are using), which the browser will understand.
Should you use preprocessors?
The decision of adopting preprocessors for your next project, in my opinion, should be made after much analysis and solely depending on your expertise level and most importantly the project requirement and workflow of the team as a whole. Here are some tips that might help you come to a decision:
Not for beginners: If you are a beginner and starting to explore the fantastic world of CSS, I would suggest you get your hands dirty with normal CSS before moving into a framework or preprocessor of any sorts. It’s really important to understand and be able to use the core concepts of any language that you work with, and that’s true for CSS as much as any other programming language.
Are you a team of front end developers? As a team of front end developers, adopting preprocessors will be a great move. But only if somebody on the team really knows how to handle huge CSS files and structure them accordingly. By making use of the powerful features offered by the language, it is important to first structure the whole CSS into reusable chunks and define a strategy for CSS organization. Eg. Are you going with multiple CSS files for typography, forms, layout etc. Are you going for theme-able UI, where you might need to use variables extensively, etc.
Are you willing to cross the barrier? Adopting preprocessors means you are going to be implementing more programming concepts into your CSS coding approach. There will be a lot of concepts that are native to any basic programming language, which you might want to learn and implement, by using a preprocessor. This means, you will definitely need to brush-up your programming skills and might forever change the way you see a CSS code. If you are willing to cross this barrier, and feel ready to embrace the change confidently, this is for you.
In CSS this is not possible. The only way to do it, is to chain the classes in your html tags.
<div class="alert alert-error myownclass"></div>
If you are using less you can do it like this:
.myownclass {
.alert
.alert-error;
}
This will copy the settings from one class to another. The result will be the same as if you copy the contents of the class directly.
If you are using Sass you can do it without copying the class contents. Just reference the classes as shown below. This will not copy the contents, instead it will reference your custom class at the right position in your css code.
.myownclass {
#extend .alert;
#extend .alert-error;
}
Ref: Sass #extend
You would have to use LESS to avoid copy/paste:
.myClass {
.bootstrapClass;
}
Or you could use any of the other CSS preprocessors TBS has been ported to (Sass has one, not sure on the others).
You could give the element two classes - the original Bootstrap class, and then one of your own making. Then you would target it like this:
HTML
<h1 class="original_class myownclass">Hello</h1>
CSS
.original_class.myownclass {
// css code
}
Here's a little jsfiddle illustrating the concept: http://jsfiddle.net/ApEpr/
This does not require the use of a CSS preprocessor - it's just regular old CSS.
When building a relatively large website, the CSS structure ought to be properly scoped and organized right from the begininning. If no CSS framework is used then everything can be lumped together into a massive stylesheet, but this will very quickly get out of order and can become a huge maintenance liability.
For the past few years, I've broken my stylesheets into various files including: base.css, layout.css, fonts.css, elements.css, but very easily the style definitions can jump between files and this approach needs to be more strict. I haven't used a framework since I'm not a fan of preset columns and pre-defined elements in my CSS code.
What approaches, patterns or tips can you guys suggest for keeping things organized? What kinds of naming conventions, reusability practices and patterns are useful? Is this something that a framework should be used for?
I used to love LESS, but now I'm a big fan of Stylus because I think it makes even cleaner code than LESS/SASS/CSS -- no semicolons, colons, or brackets.
Because Stylus (and LESS and SASS) allow you to define variables and templates and functions, I have the following files, which should be in this order:
reset - A Stylus version of Eric Meyer's CSS reset
variables - Variables like colors, fonts, etc.
templates - Templates like border-radius, transitions, and clearfix
Stylings for each page (homepage, app, terms of service, etc)
These are all concatenated and compiled to CSS using a simple build script.
You can see what these look like; I made a GitHub repo for this stuff.
For writing consistent and manageable stylesheets CSS LESS Framework is very beneficial.
LESS provides the following mechanisms: variables, nesting, mixins, operators and functions for writing CSS codes dynamically and can run on the client-side (Internet Explorer 6+, WebKit, Firefox) and server-side, with Node.js or Rhino.
http://lesscss.org/
Regarding Stylus — lack of semicolons, colons, and brackets makes your code less readable IMO, rather than moreso.