Say I have this:
$my-font-size:14px;
p{
font-size:$my-font-size;
}
div.section{
&.type-1,&.type-2{
h1{
font-size:$my-font-size;
}
}
}
Now say I want to combine this into one line. So I write:
p,div.section.type-1 h1, div.section.type-2 h1{$font-size:$my-font-size;}
But say I still want to benefit from the functionality that I don't have to repeat the "parent" which is div. Is there any way to do this? Like for example:
p,div.section((&.type-1,&.type-2)) h1{$font-size:$my-font-size;}
So basically I'm looking for some sort of shorthand syntax so that I can combine it with another selector.
div.section{
&.type-1,&.type-2{
h1{
Sass 3.3 or later
The function you're looking for is called selector-append. In your case, however, you also need to combine it with selector-nest for the h1.
p, #{selector-nest(selector-append('div.section', ('.type-1', '.type-2')), h1)} {font-size:$my-font-size;}
Sass 3.2 or older
For older Sass versions, you can use the append-selector function that comes with Compass, but both arguments must be strings. As above, you'll need to combine it with the nest function for the h1.
p, #{nest(append-selector('div.section', '.type-1, .type-2'), h1)} {font-size:$my-font-size;}
Related
When I use:
cy.get('b').contains('xdz') // find 1 element
but when I use:
cy.get('b:contains("xdz")') // find 2 elements
Can someone explain me what is the difference?
cy.get('b').contains('xdz') is invoking a Cypress command, which is designed to only return a single element. This is by design so that you can narrow a search by text content.
cy.get('b:contains("xdz")') is using a jquery pseudo-selector :contains() to test the text inside element <b> and is designed to return all matching elements.
Pseudo-selectors are extensions to the CSS selector syntax that apply jQuery methods during the selection. In this case :contains(sometext) is shorthand for $el.text().contains('sometext'). Becuase it's part of the selector, it returns all matching elements.
It's worth while understanding jquery selector variations, as this example illustrates - it can give you different results for different situations.
contains('xdz') is a cypress command which always yields only the first element containing the text. You can read more about it from this Github Thread.
:contains("xdz") is a Jquery command and it returns all elements containing the text. You can read more about it from the Jquery Docs.
In my problem I search for elements that have an example structure like:
<ngc-product-card ng-reflect-signup-type="comprehensive">
Since the elements may have the comprehensive value stored in another attribute, say:
<new-ngc-product-card data-label="comprehensive signup">
hence I would like to use a wildcard-attribute-name search and also apply the contains() function like:
//*[contains(#*,"comprehensive")]
which doesn't work
What does work is
//*[#*="comprehensive"]
Is there any way to use both '#*' and 'contains()' ?
This should do.
//*[#*[contains(., "comprehensive")]]
There's a SASS variable defined as follows:
$section-padding: 3rem 1.5rem !default
It is then used elsewhere as a padding value which works fine:
padding: $section-padding;
How do I dynamically get hold of the 1.5rem value? Is there some way to extract it, supposing the $section-padding variable will always contain a shorthand padding/margin definition?
I cannot split the value into two separate variables as $section-padding is defined like this in a third-party CSS framework (Bulma).
Seems I was on the right track, but a mistake in a calc() call where I was using it made it blow up.
SASS has the concept of lists. A variable is considered a list if it contains space or comma separated values. You can then extract the desired part by using the nth() function (1-based indexing):
nth($section-padding, 2)
Note that to use this in a calc() the function call should be wrapped in #{} (which was my mistake):
padding: calc(200px + #{nth($section-padding, 2)});
So, I'm looking through the documentation, and unfortunately it stops short of offering any sort of explanation on how the normal TinyMCE format translates into the settings.py TINYMCE_DEFAULT_CONFIG dictionary.
Basically, I need to configure it so that bold is represented as b, not strong, and other similar changes.
Does anyone have a syntax example they could share for this?
So, it turns out, using:
django-tinymce4-lite
As my library, the way this is done is:
Try adjusting the formatting for inline to use the different element
If it's still persistent, add the element to the extended_valid_elements
Finally, if it really won't stop using strong and em, blacklist those tags
'formats': {
'bold':{'inline': 'b'},
'underline':{'inline': 'u'},
'italic':{'inline': 'i'},
}
and later:
extended_valid_elements:'u,b,i'
finally:
invalid_elements:'em strong'
I would like to use this CSS selector but rather than specify the EXACT width and height of the image, I need to pick a minimum or maximum or a range for width and/or height. I'm using the Nokogiri gem in Ruby, is there any way to do this?
img = doc.css("img[#width = '#{width}'][#height = '#{height}']").collect{|e| e.attributes["src"].value}
For example width > 200 etc...
I'm not sure what the self.body is all about but you can select img's by width like so:
doc.css('img').select{|img| img[:width].to_i > 200}
or
doc.css('img').select{|img| (200..300).include? img[:width].to_i}
doc.xpath('//img[#width > 200]/#src').map {|a| a.value }
or
doc.xpath('//img[#height >= 50 and #height <= 300 and #width >= 50 and #width <= 300]/#src').map {|a| a.value }
I can´t give you an exact solution, but I think you should be able to do this in Nokogiri by using XPath.
The function library provides min/max functions.
The solutions already provided involve either using css and filtering the results with Ruby, or using xpath where you can make use of xpath functions to filter the nodes you're interested in.
With Nokogiri there is another technique that might be useful, you can define your own custom css pseudo classes that you can then use in your selectors. For example you could define a height_greater_than pseudo class and then use a selector like img:height_greater_than(200).
You do this by defining a (Ruby)class with methods for the pseudo (css)classes you want to implement. Each method should take a NodeSet as its first argument, then whatever arguments you want to pass from the css.
class CustomPsuedoSelectors
def height_greater_than(nodes, height)
nodes.find_all {|n| n['height'].to_i > height}
end
end
Next pass an instance of this class as an argument to the call to css:
nodes = doc.css 'img:height_greater_than(200)', CustomPsuedoSelectors.new
It might not be worth doing this for a single query, but if you're making selections like this a lot, and you prefer the css syntax over using xpath, it might be worth creating some custom classes like this.
One final thing, since css tends to use hyphens rather than underscores, you might want to create aliases for your methods, e.g. add alias :"height-greater-than" height_greater_than after the definition of height_greater_than. Then you can use the more natural img:height-greater-than(200) as your css selector. (You could also use define_method).