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)});
Related
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;}
Is there a way to indent Sass' 3.3 mappings?
In scss we can write following:
$colors: (
header: #b06,
text: #334,
footer: #666777
)
But in Sass I cannot add any break into parentheses. I think that parentheses is required into mappings syntax.
$colors:
header: #b06
text: #334
footer: #666777
Syntax error: Illegal nesting: Nothing may be nested beneath variable declarations.
I tried some variances and nothing was compiled without errors.
To compile Sass I need to write it into one string like this:
$colors: (header: #b06, text: #334, footer: #666777)
But it is not indented syntax.
I think that will be a good walkthrough to write indented-only things into SCSS file and then import them.
There is number of issues with the indented syntax in SASS.
Unfortunately SASS syntax doesn't support Multi-line. Reading the documentation, there is only one exception, when it comes to multiple CSS selectors like in this example:
.users #userTab,
.posts #postTab
width: 100px
height: 30px
Read the complete documentation here:
http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html#multiline_selectors
So, there is no possibility to get multi-line support for an argument list in SASS.
This is a known issue and will not be addressed any time soon.
This is definitely something I'd like to add, but it would take a considerable amount of effort due to the refactoring of the indented syntax that would be required. Right now that's just lower priority than adding features that benefit everyone.
https://github.com/sass/sass/issues/1088
I have HTML like below and I want to get the element by "sku-code" (there is a hyphen in it)
<div class="leavemessagebox" style="position: relative;" sku-code="m_showcase">
When I used
browser.div(:sku-code=>'m_showcase')
Ruby reported an error
ERROR:undefined local variable or method `code' for #<AUT::WebClient:0x2c59650>
It sames Ruby can't recognize "sku-code" as a name, anyone can give me any suggestion about how to get the element by "sku-code"?
Sorry for not explain myself clearly. There are many elements that have sku-code selector and I want to collect them all in a list, so the class name and tag name isn't stable. How can I do that
Looks like Watir WebDriver. Try use css (preferred) or xpath.
browser.element(:css => "[sku-code='m_showcase']") # single one
browser.elements(:css => "[sku-code='m_showcase']") # a list of all matches
Documention on CSS's attribute selector is here.
So basically the above selector finds all elements with attribute sku-code equals to m_showcase.
:sku-code is not a valid symbol literal. It is however valid Ruby code, it is parsed as:
:sku - code
So, you are trying to call a method named code and subtracting its return value from the symbol :sku, which obviously doesn't make sense.
But you can quote the symbol literal, of course:
:'sku-code'
browser.element(:css => ".leavemessagebox[sku-code='m_showcase']") I think this will still the specific CSS.
Please Let me know is the above CSS is working or Not.
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).
Is there a way to change a subvariable within a hash or a container in a FreeMarker template? For example, suppose I had:
{"name":"Bob", "city":"Detroit", "state":"OH"}
and I want to change the state to "MI". How would I go about doing that? I know about the assign tag, but the documentation says "Note that only top-level variables can be created/replaced". I am unsure as to whether this means subvariables can't be replaced with the assign tag, or subvariables can't be replaced by any means.
I figured out a simple way to do it:
<#assign hash = hash + {"state":"MI"}>