.name {
%common {
// common stuff
}
&__first-type {
#extend %common;
// first type thing
}
enter code here
&__second-type {
#extend %common;
// second type thing
}
}
I want to collapse all thing in name class
(first-type, second-type, and also a common part)
but I don't want anything more in the executed CSS file.
.name__first-type, .name__second-type {
//common thing
}
.name__first-type {
//first type thing
}
.name__second-type {
//second type thing
}
can I do this thing without separating non-executable common(%common)?
It is possible to generate those two class like this.
%name__common {
// common stuff
}
.name {
&__first-type {
#extend %name__common;
// first type thing
}
&__second-type {
#extend %name__common;
// second type thing
}
If you mater nice project architecture you can either put this %name__common{...} in partial file such as _commons.scss
or try to change your project coding style.
Is it possible with Emmet to shorthand this CSS? Each class corresponds to an image asset and they share an increasing number.
.penguin1 { background-image:url('penguin_pngs/mound_1.png'); }
.penguin2 { background-image:url('penguin_pngs/mound_2.png'); }
.penguin3 { background-image:url('penguin_pngs/mound_3.png'); }
.penguin4 { background-image:url('penguin_pngs/mound_4.png'); }
.penguin5 { background-image:url('penguin_pngs/mound_5.png'); }
.penguin6 { background-image:url('penguin_pngs/mound_6.png'); }
.penguin7 { background-image:url('penguin_pngs/mound_7.png'); }
.penguin8 { background-image:url('penguin_pngs/mound_8.png'); }
I am able to use CSS shorthand such as bgi which expands to background-image: url(); but is it possible to repeat the classname and use a numbering operator such as Emmet's html $ operator?
This question already has answers here:
Modifying the middle of a selector in Sass (adding/removing classes, etc.)
(2 answers)
Closed 7 years ago.
I know you can add a parent selector like this:
.main-selector {
.parent-selector & {
}
}
I'm trying to figure out if there is a way to go back to the .main-selector so I can add a hover state style to a child element. So, something like this:
.main-selector {
.child-selector {
*styles*
.main-selector:hover & {
*hover styles*
}
}
}
The correct syntax would be:
.main-selector {
.child-selector {
*styles*
}
&:hover {
*hover styles*
}
}
This will produce a hover for your main-selector. You could do it the other way arround, like so:
.main-selector {
&:hover {
*hover styles*
}
.child-selector {
*styles*
}
}
I have the following bit of Sass code :
.c-panel-menu-c {
&.grid_6 {
float: right;
}
}
i need to have float right applied to all grids that start with grid_ . The float should only be set when the grid class is applied to an element that also has c-panel-menu-c.
I wanted to use a wildcard selector like
div[class*='grid_'] {
float:right
}
But am not sure if it's possible the way i need it. Something like
.c-panel-menu-c {
&.div[class*='grid_'] {
vertical-align: top;
}
}
Which doesnt work.
Thank you for any tips/advice.
the problem is the tag name ... you can not concatenate a tag name, for example div, at the end of another selector, like you would with a class name. Let's look at your example:
.c-panel-menu-c {
&.grid_6 {
...
}
}
will return
.c-panel-menu-c.grid_6 { ... }
which is a valid selector. But attaching 'div' at the end (lets leave out the attribute selector part for now)
.c-panel-menu-c {
&div {
...
}
}
does not make sense (and it also isn't possible in Sass, hence you get an error) as the tag name should always be before the class or id selector. This does not change if we add an attribute selector statement, so that's why it does not work the way you tried &div[class*='grid_'].
What you can do, is add the attribute selector directly to the preceding class name, like so:
.c-panel-menu-c {
&[class*='grid_'] {
...
}
}
which would compile to:
.c-panel-menu-c[class=*'grid_'] { ... }
and select everything that has the class .c-panel-menu-c and a class containing with grid_.
Is possible to make an important property value from CSS selector a non important one?
For example: Bootstrap 3 defines .hide class as:
.hide { display: none !important; }
Is possible to remove the important value without modifying the BS3 source code?
Thinking at somethingl iike
.hide { display: none !remove-important; }
Note that I want to keep the same value! I don't want to set block !important to .hide class because that would not be correct...
I already added a new class .hide-non-important and used it where it was needed:
.hide-not-important { display: none; }
...but the question is: is there any alternative to this?
You don't need to edit the original source code. Just create a stylesheet and place it after the Bootstrap stylesheets and add this to it:
.hide { display: block !important; }
Now, having said this, I would be very careful about doing this. You don't know how many elements across your site have applied this class, and you will almost certainly get unanticipated results.
There is obviously a reason that this class has been applied, I would suggest either:
don't do this
add some other class to the element and add styles to that. Adjust your markup (or use js to apply the class if need be) to something like:
<div class="hide custom-hide-reset"></div>
Then add this style to the stylesheet you've created:
.custom-hide-reset { display: none; }
You can overwrite this with:
body .hide { display: none !important; }
.someclass.hide { display: none !important; }
those two examples have higher priority
The stylesheet objecs are accessible from javascript
var sheets = document.styleSheets
Once you have the stylesheet array, you can iterate over the rules
var rules = sheets[i].cssRules || sheets[i].rules // browser dependency
Each rule has a style property, which is mutable in the usual way.
rule.style[cssPropName] = value;
There is a method on the sheet to delete a rule by index, either deleteRule or removeRule, depending on the browser.
Bottom line, you can find the rule and either edit it or delete and re-add it in a modified form.
Reference: http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml#.Ujsin4ZmjAs
Since the question can be splitted in
how can I remove !important from a rule applied to my page but
without changing its value and
without editing the original CSS file
For pure spirit of adventure only, I think it would be possible in the following way:
load the CSS with jQuery;
perform a replacement of its content, by searching .hide { display: none !important; } and replacing it with .hide { display: none; };
apply the new in-memory altered CSS to the page.
Taking for good the solution posted in this answer, it could be modified with something (totally untested, just to get the idea) like:
$.get(myStylesLocation, function(css)
{
var alteredCss = css.replace(".hide { display: none !important; }",".hide { display: none; }");
$('<style type="text/css"></style>')
.html(alteredCss)
.appendTo("head");
});
You can override the current !important value by another one like
.col{ color:red !important; }
.col{ color:green; } // wont work
.col{ color:blue !important; } // will work and set color blue instead of red
DEMO.
Update :
This question is not about JavaScript but as an alternative you can accomplish the task using these technique, remove the rule using JavaScript and then add a new rule again.
function getCSSRule(ruleName, deleteFlag) {
ruleName=ruleName.toLowerCase();
if (document.styleSheets) {
for (var i=0; i<document.styleSheets.length; i++) {
var styleSheet=document.styleSheets[i];
var ii=0;
var cssRule=false;
do {
if (styleSheet.cssRules) {
cssRule = styleSheet.cssRules[ii];
} else {
cssRule = styleSheet.rules[ii];
}
if (cssRule) {
if (cssRule.selectorText.toLowerCase()==ruleName) {
if (deleteFlag=='delete') {
if (styleSheet.cssRules) {
styleSheet.deleteRule(ii);
} else {
styleSheet.removeRule(ii);
}
return true;
} else {
return cssRule;
}
}
}
ii++;
} while (cssRule)
}
}
return false;
}
function killCSSRule(ruleName) {
return getCSSRule(ruleName,'delete');
}
function addCSSRule(ruleName, v) {
if (document.styleSheets) {
if (!getCSSRule(ruleName)) {
if (document.styleSheets[0].addRule) {
document.styleSheets[0].addRule(ruleName, v,0);
} else {
document.styleSheets[0].insertRule(ruleName+'{'+v+'}', 0);
}
}
}
return getCSSRule(ruleName);
}
// Check the rule before deleting
console.log(getCSSRule('.col')); // .col { color:red !important; }
// At first remove the current rule
killCSSRule('.col');
// Now assign nre rule
addCSSRule('.col', 'color: red');
// Check the rule after deleting
console.log(getCSSRule('.col')); // .col { color:red; }
DEMO. ( Source : Totally Pwn CSS with Javascript )