I've seen somewhere the ability use * for ID or class selectors with SASS...what is the right way to do this?
For example I want to select all div id's inside a parent div. I would imagine something like this:
<div id="parent">
<div id="sub1">
<div class="icon"></div>
<div class="content"></div>
</div>
<div id="sub2">
<div class="icon"></div>
<div class="content"></div>
</div>
#parent {
#* {
}}
You can use only a css selector, like it:
#parent {
div[id] {
// styles
}
}
or
#parent {
div[id^='sub'] {
// styles
}
}
If the children are named in an orderly fashion, you could make it easier to update using the #for directive:
$num-of-children: 2
#for $i from 1 through $num-of-children
#sub-#{$i}
#extend %parent-children
#parent
%parent-children
//styles
In addition, if the ids are more arbitrary, you can pass a list into the #each directive to achieve a similar effect:
$children: sam ramond lemons butter
#each $child in $children
##{$child}
#extend %parent-children
#parent
%parent-children
//styles
Related
how to apply styles conditionally inside multiple id selection in sass?
for eg. if there is following html file
// demo.html
<div id="id1">
<h1></h1>
</div>
<div id="id2">
<h1></h1>
</div>
<div id="id3">
<h1></h1>
</div>
then I should be able to apply styles like following.
// styles.scss
#id1,
#id2,
#id3 {
if(id1): apply red color to <h1>
else: apply blue color to <h1> // ie to <h1>s inside id2 and id3 divs.
}
There is a if/else in scss. Check this out -> https://sass-lang.com/documentation/at-rules/control/if
However, I'm not sure if that's possible with SCSS only... Check the docs. You will see that the conditions are mostly based on the passed parameters
Why don't you use a each loop instead of conditions? First you declare a list of the styles and then you loop over them to apply them:
$colors: ("1": red, "2": green, "3": blue);
#each $id, $color in $colors {
#id#{$id} {
color: $color;
}
}
The first parameter is the key of the item in the list and the second one is the value. Here is a codepen for you to play around with.
I wrote a plugin for CKEditor 4 that uses widget and dialog. My widget, simplifying a little bit, consists of a div with a nested ul and a number of li's. For some reason, when I switch from WYSIWYG mode to SOURCE mode, the ul is turned into a double nested ul.
I have defined which elements in the widget should be editables and I have defined which elements should be allowedContent for those editables.
My original structure in WYSIWYG mode (after the dialog closes and the widget is created) is like this:
<div class="mycustombox">
<div class="conditions-box">
<div class="conditions-services">
<span class="rwd-line-title">TITLE FOR THE UNORDERED LIST</span>
<ul class="services-list">
<li>an example list item</li>
<li>another example list item</li>
</ul>
</div>
</div>
</div>
I have double checked that this is the actual html by inspecting the source of the page in the Chrome Developer Console. But when I switch to SOURCE mode, the structure then becomes:
<div class="mycustombox">
<div class="conditions-box">
<div class="conditions-services">
<span class="rwd-line-title">TITLE FOR THE UNORDERED LIST</span>
<ul class="services-list">
<ul>
<li>an example list item</li>
<li>another example list item</li>
</ul>
</ul>
</div>
</div>
</div>
The original ul with the class I gave it is there, but there is an extra nested ul wrapping the li elements.
I have defined my allowed widget content in the plugin.js:
allowedContent: 'div(!mycustombox); div(!conditions-box); div(!conditions-services); span(!rwd-line); span(!rwd-line-title); ul(!services-list); li; p; div',
requiredContent: 'div(mycustombox)',
upcast: function( element ) {
return element.name == 'div' && element.hasClass( 'mycustombox' );
},
And I have defined the ul element as an editable like so:
editables: {
priceincludes: {
selector: 'div.conditions-box div.conditions-services ul',
allowedContent: 'li em strong'
},
}
I have also allowed ul's to be editable by the general CKEditor instance as so:
CKEDITOR.dtd.$editable[ 'ul' ] = 1;
Is there some setting in the CKEditor configuration which could be causing this behaviour?
Well I don't know if this is the best solution, but it works.
Tell CKEDitor to stop trying to automatically wrap li elements with a ul tag. For some reason it's treating them as though they weren't already wrapped in a ul tag.
Using this at the beginning of my plugin.js fixes the problem:
delete CKEDITOR.dtd.$listItem['li'];
delete CKEDITOR.dtd.$intermediate['li'];
I got the idea from here:
http://margotskapacs.com/2014/11/ckeditor-stop-altering-elements/
Seems kind of hackish to me, but until I find a better solution I'll just use this.
I am using BEM Scss explain please how to select inside nth-child element.
I tried below format but it didn't work for me
<div class="bookearly-container" >
<div class="row bookearly-container__row">
<div class="col-xs-12 col-md-4 bookearly-container__col">
<div class="bookearly-container__discountcontainer">
</div>
<div class="bookearly-container__discountcontainer">
</div>
<div class="bookearly-container__discountcontainer">
</div>
</div>
</div>
</div>
MY BEM Scss I added nth-child 3rd element children element that is not working:
.bookearly-container {
&__row {
margin-bottom: 4.6rem;
& > :nth-child(3) {
&__discountcontainer { -- this element not selected
&:before {
display: none;
}
}
}
}
}
Can you please explain how to select? Thanks in advance.
You are using the child combinator (>) inside .bookearly-container__row(line 4 in your CSS example), and the only direct child there is .bookearly-container__col.
If you want to target the .bookearly-container__discountcontainer elements you need to adjust the selector nesting a bit.
Try using the #debug directive combined with the & selector to see what you are actually selecting, it's helpful when you get no other clues.
This is a straight-forward suggestion to solve it:
.bookearly-container {
#debug &; // .bookearly-container
&__row {
#debug &; // .bookearly-container__row
}
&__discountcontainer:nth-child(3) {
#debug &; // .bookearly-container__discountcontainer:nth-child(3)
&:before {
#debug &; // .bookearly-container__discountcontainer:nth-child(3):before
}
}
}
If you are depending on the child combinator (>) for some reason, you could nest it inside a &__col selector, like so:
.bookearly-container {
&__col {
// Targeting any class ending with "__discountcontainer"
& > [class$="__discountcontainer"]:nth-child(3) {
&:before {
#debug &; // .bookearly-container__col > [class$="__discountcontainer"]:nth-child(3):before
}
}
}
}
Using Sass, and Compass I would like to import one font file, but have 3 different sizes for it. But this question is more basic than that, The following code is an example of how I think maybe, but not sure sass class inheritance can work. what would be the best practice for something like this?
Something like
#include font-face("Kingthings Kelltika",font-files("http://www.fontsaddict.com/fontface/kingthings-kelltika.ttf"));
.Kingthings {
font-family:"Kingthings Kelltika";
.small{
font-size:.7em;
}
.medium{
font-size:.1em;
}
.large{
font-size:2em;
}
}
and then in the html say something like
<div class= "Kingthings small">
Your selectors will never be reached how you have defined them:
Here is an easy way to do what you are looking for:
http://jsfiddle.net/twT2e/
<div class= "Arial font-lg">
Sample Text
</div>
.Arial { font-family:"Arial"; }
.font-sm { font-size:.7em; }
.font-md { font-size:1em; }
.font-lg { font-size:2em; }
If you want to use SASS to provide some sort of hierarchy to your selectors it would look something like this;
<div class= "Arial">
<div class="font-sm">Sample Text1</div>
<div class="font-md">Sample Text1</div>
<div class="font-lg">Sample Text1</div>
</div>
.Arial { font-family:"Arial";
.font-sm { font-size:.7em; }
.font-md { font-size:1em; }
.font-lg { font-size:2em; }
}
<div id="menu">
<ul>
<li>Menu link</li>
</ul>
</div>
<div id="content">Dummy content</div>
I want to get the UL tag using parent id.
The condition is if the UL tag is missing, i need to apply new class for the Content Div.
script
document.observe("dom:loaded", function() {
if( --------)
{
$('content').removeClassName('fwidth');
}
else{
$('content').addClassName('fwidth');
}
Thanks
I don't really understand your question, but if you want to find out if <div id="content"> has ul elements, try
if ($('content').down("ul"))