I'm using bootstrap for a simple test webapp. I want a button to start off with the standard style (btn), and switch to the btn-danger style only on hover. I know this can be done with jquery or straight javascript, but I'm really not interested in that approach.
Can I do this in straight CSS without copying any of the bootstrap style code into my own CSS? Ideally, I'd like to be able to do something like this:
.mybutton {
}
.mybutton:hover {
style: btn-danger;
}
http://jsfiddle.net/wPDCm/5/
The syntax for using LESS (the CSS preprocessor that Twitter Bootstrap uses) should be this:
.mybutton:hover {
#include .btn-danger;
}
There is no way to do this with CSS alone.
This can't be done without a CSS pre-processor.
Using SASS you could do something like:
#mixin danger-will-robinson {
background-color: red;
}
.btn-danger {
#include danger-will-robinson;
}
.mybutton:hover {
#include danger-will-robinson;
}
Other CSS preprocessors have similar features.
Related
It sounds like this is something that sass/less/mixins/jquery are required for right now.
What I'm looking to do is something like this:
.myClass {
color: blue;
}
h1 {
class: myClass;
}
I'm curious why this was not done already, given that CSS seems to be about inheritance/aggregation if nothing else.
Does it not make sense for some reason?
Or maybe it's just too complex?
Thanks!
...I don't know if this is the first '#extend' proposal, but it comes out because of its popularity in sass, apparently: http://tabatkins.github.io/specs/css-extend-rule/
and there is an early discussion of the proposal in this list thread: https://lists.w3.org/Archives/Public/public-houdini/2015Jan/0005.html
Not sure if it is going to be a future CSS standard. But you can already do it with SASS and SCSS. Here is SCSS syntax:
.myClass {
color: blue;
}
h1 {
#extend .myClass;
...
}
Documentation: https://sass-lang.com/documentation/at-rules/extend
Well, in effect what you are trying to do is to make your CSS properties defined in the .myClass block, apply in your h1 block, (correct me if I'm wrong).
If that's what you meant, you can already do that by simply adding myClass to your h1 tag like <h1 class="myClass">Header</h1> and in your CSS you would do this:
.myClass {
color: blue;
}
// or
h1.myClass {
color: blue; // To only target h1 that have the 'myClass' class
}
Will future CSS standard allow applying classes to elements in a style declaration?
Well as you can see we can already do that with HTML, so I doubt it.
Honestly, I have no idea how to write this to work. I want a sass mixin that would remove that blue Bootstrap outline every button tends to have, so I can just add it to buttons I want as I go along.
Could someone possibly help me with this one?
I've tried a few approaches, but they basically do nothing.
You could set the SCSS variable like so:
$btn-focus-width: 0;
you would have something like this:
#mixin outline($value) {
outline: $value;
}
button {
#include outline(0);
}
which outputs:
button {
outline: 0;
}
see a demo here
I'm looking into LESS because I definitely see some of their benefits. For instance colour declaration.
One thing I don't understand tho, and maybe I'm not getting the flow right is - why use the following LESS snippet
.radius {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.btn-red{
background-color:red;
.radius;
}
.btn-green{
background-color:green;
.radius;
}
...
When we can use the .radius class in the html file right away. I'm left with the impression that LESS will add a ton of duplicate code once it gets compiled.
I'm using the following, which makes more sense. Same with font-size, margins, etc... Aren't classes used in such cases?
<div class="btn-red radius">Cancel</div>
<div class="btn-green radius">Go</div>
The snippet above does not benefit from SASS/LESS capabilities that much. Lets have a closer look and check this SCSS snippet.
// Abstract placeholder.
%radius {
border-radius: 5px;
}
// Put your global styling here.
// I'm assuming that you can alter the markup and have button.btn.btn-green
.btn {
// Color modifier.
&-red {
#extend %radius;
background-color: red;
}
&-green {
#extend %radius;
background-color: green;
}
}
The CSS output will be:
.btn-red, .btn-green {
border-radius: 5px;
}
.btn-red {
background-color: red;
}
.btn-green {
background-color: green;
}
And then you have to pick up Autoprefixer and vendor-prefixes issue is solved once and for all.
Because now, you can just specify the class btn_red or btn_green and all the buttons will automatically have a radius.
Your HTML should contain only the semantics, and styling or classes referring to styling should not be part of it.
That applies to the other classes as well. If for instance, you would rename btn_red to btn_cancel, you have a meaningful classname that you can apply to any kind of cancel button. And in the CSS you can specify that a cancel button is red and a 'Go' button is green, and both have a radius, without needing to modify the HTML at all.
So, the ultimate goal is to have the HTML describe the structure and the CSS describe how that structure should look. And a CSS preprocessor is only their to make a bulky spaghetti-like CSS file more structured.
There are several benefits.
You can use more semantic class names. Rather than encoding style information directly in your class names, (btn-red, radius) you could use a single class that conveys the usage of the style, rather than its contents.
You can avoid repeating yourself.
#radius-size: 5px;
-webkit-border-radius:#radius-size;
-moz-border-radius:#radius-size;
border-radius:#radius-size;
You can parameterize it so that you'd be able to use different radiuses (radii?) in different contexts.
.radius(#radius-size) { ... }
Because there are cases that developer has-no-access or don't-want to change the markup. and the only solution is to include all props from a predefined class.
for example:
you have bootstrap loaded (then you already have .has-success and .has-error classes) and if you want to use HTML5's native form validation using input's :valid and :invalid states, you have to use JavaScript to add/remove success/error classes based on input's states. but with this feature of LESS you can include all props of success/error class inside input's states. the code for this example could be something like this:
#myinput {
&:valid { .has-success; }
&:invalid { .has-error; }
}
I am working on moving bootstrap css out of my code.
I want to build various classes I can call from my .css (actually .scss) file.
CSS and I have always trod different paths, but I am just learning it now.
I want to build something like this in a different css class:-
<div class="well span4">
CSS
.datainput {
well; span4 #<<<<this is where I get lost.
}
Thanks
In Sass, classes are extended like this:
.datainput {
#extend .well;
#extend .span4;
}
Which would generate output that looks like this:
.well, .datainput {
// styles here
}
.span4, .datainput {
// styles here
}
If you're using LESS, which is what TB was written in, it would look like this:
.datainput {
.well;
.span4;
}
I have a very wierd question, I dont know wether if its possible in css or not
Suppose I have say 3 different css classes as shown below, as you can see I have a common property of all these classes, I want to declare this color somewhere else and pass a reference to it here, so if next time I want to change the color I can simply change at one place rather than changing in all the 5 classes.
I know that you can use body{}, or a wrapper for this but that would affect the colors of the entire site right ? Is there a way to do this ?
Is this even possible ?
.abc {
color:red;
}
.abc2 {
color:red;
}
.abc3 {
color:red;
}
.abc4 {
color:red;
}
.abc5 {
color:red;
}
The bad news: you can't do it in CSS.
The good news: you can write in a meta-CSS language like LESS, which then processes a LESS file to pure CSS. This is called a "mixin".
In LESS:
#errorColor: red;
.error-color {
color: #errorColor;
}
#error-1 {
.error-color;
}
.all-errors {
.error-color;
}
More info: http://lesscss.org/#-mixins
if you want to declare all of them at a time, you can use:
.abc, .abc2, .abc3, .abc4, .abc5 {
color:red;
}
Or you can declare an additional class & add to all the .abc, .abc2.... & make its color:red;.
This can not be done with CSS, but that is still a very popular thing to do by using a CSS preprocessor such as LESS, SASS, SCSS, or Stylus.
A preprocessor will let you define a variable (say $red = #F00). It will replace the variable in your CSS document with the variable value for you, allowing you to write very DRY and module CSS.
This functionality is referred to as "CSS variables", which is part of the future spec, but not yet implemented on any browsers.
For now, the best way to do this in pure CSS is to declare an additional class for the desired "global", and then add that class to all relevant items.
.abc_global { color: red; }
.abc1 { /* additional styling */ }
.abc2 { /* additional styling */ }
<div class="abc1 abc_global"></div>
<div class="abc2 abc_global"></div>
With LESS
You are able to define that red color once:
.myRedColor {
color:red;
}
Now you can call that red on any CSS styles. Even NESTED styles! It's a wicked tool!
.abc1 {
.myRedColor;
}
.abc2 {
.myRedColor;
}
.abc3 {
.myRedColor;
}
.abc4 {
.myRedColor;
}
NESTED EXAMPLE:
.abc {
.itsEasyAsOneTwoThree{
.myRedColor;
}
}
Now all of our "itsEasyAsOneTwoThree" classes that are properly nested inside of an "abc" class will be assigned the red style. No more remembering those long #867530 color codes :) How cool is that?!
You can also use PostCSS with the plugin postcss-preset-env and support custom properties/variables, then use the :root selector to add global css variables.
:root {
--color-gray: #333333;
--color-white: #ffffff;
--color-black: #000000;
}