How can I pass the return value form a custom Sass function to a Susy function?
Or is there any better approach?
This works fine:
.foo{
max-width: get_breakpoint('large');
}
But that won't:
.foo{
#include layout(get_breakpoint('large') 12);
}
Susy just falls back to the default container width instead of using the one from my get_breakpoint() function.
The built uses Compass, I have the following function in my config.rb:
module Sass::Script::Functions
#
# get breakpoint values from prefs file (json)
#
def get_breakpoint(bp)
if PROJ_PREFS['breakpoint'].include?(bp.value)
retVal = PROJ_PREFS['breakpoint'][bp.value][0].to_s+'px'
else
retVal = bp.to_s
end
Sass::Script::String.new(retVal)
end
end
Software versions: sass (3.4.21), compass (1.0.3), susy (2.2.12).
Many thanks.
It turns out that it shouldn't be a problem to use a custom function as a Susy mixin argument as long as it passes the right value. I was passing a string instead of Sass number.
Just in case someone stumble across similar problem, below there is an example of working solution retrieving breakpoint values from Json into Sass (Assuming you've got json gem installed).
Note that this solution isn't perfect from the performance point of view as it recreates the $BREAKPOINT map each time the _base.scss partial is imported. (It also omits my custom breakpoint mixin as not relevant here and which uses the breakpoint function as well)
My breakpoint definitions are stored as 'unitless' numbers in json
{
"breakpoint" : {
"mini" : [ 481 , "phablet portrait phone landscape"],
"xsmall" : [ 736 , "phablet landscape (iPhone6plus) tablet portrait"],
...
Ruby code (in Compass config.rb)
require 'json'
file = File.read(File.dirname(__FILE__)+'/preferences.json')
PROJ_PREFS = JSON.parse(file)
module Sass::Script::Functions
def get_breakpoints()
retMap = Hash.new
PROJ_PREFS['breakpoint'].each do |bp_name, bp_value|
retMap[Sass::Script::Value::String.new(bp_name.to_s)] = Sass::Script::Value::Number.new(bp_value[0],'px')
end
Sass::Script::Value::Map.new(retMap)
end
end
Sass code (e.g. _base.scss)
// create Sass map with custom function
$BREAKPOINT:get_breakpoints();
// allow Sass numbers (such as 12em, 355px) or breakpoint names (such as small, large) to be passed through
// it was just easier for me to code it in Sass (since I don't know Ruby at all)
#function breakpoint($key) {
#if not map-has-key($BREAKPOINT, $key) { #return $key; }
#return map-get($BREAKPOINT, $key);
}
Usage example (involving Susy)
.foo{
#include container(breakpoint(large));
}
Related
I know we can minify HTML in CI3 through the hook but in CI 4
I have done it by adding a minify function before return on every method.
minifyHTML(view('admin/template/template',$this->data));
Any other way I can do it without using the minify function everywhere?
I also figure out another solution which is to add a template function in BaseConroller which renders all the views. but I have already used view() in many places in the project and its not feasible for me but can be work for others.
In CodeIgniter4 You can use Events to Minify the output (Instead of using Hooks like what we did in CodeIgniter3) , by adding the following code inti app/Config/Events.php file
//minify html output on codeigniter 4 in production environment
Events::on('post_controller_constructor', function () {
if (ENVIRONMENT !== 'testing') {
while (ob_get_level() > 0)
{
ob_end_flush();
}
ob_start(function ($buffer) {
$search = array(
'/\n/', // replace end of line by a <del>space</del> nothing , if you want space make it down ' ' instead of ''
'/\>[^\S ]+/s', // strip whitespaces after tags, except space
'/[^\S ]+\</s', // strip whitespaces before tags, except space
'/(\s)+/s', // shorten multiple whitespace sequences
'/<!--(.|\s)*?-->/' //remove HTML comments
);
$replace = array(
'',
'>',
'<',
'\\1',
''
);
$buffer = preg_replace($search, $replace, $buffer);
return $buffer;
});
}
});
see https://gitlab.irbidnet.com/-/snippets/3
You need the extend your core system classes to be able to do that in a system wide scope.
Every time CodeIgniter runs there are several base classes that are initialized automatically as part of the core framework. It is possible, however, to swap any of the core system classes with your own version or even just extend the core versions.
Two of the classes that you can extend are these two:
CodeIgniter\View\View
CodeIgniter\View\Escaper
For example, if you have a new App\Libraries\View class that you would like to use in place of the core system class, you would create your class like this:
The class declaration must extend the parent class.
<?php namespace App\Libraries;
use CodeIgniter\View\View as View;
class View implements View
{
public function __construct()
{
parent::__construct();
}
}
Any functions in your class that are named identically to the methods in the parent class will be used instead of the native ones (this is known as “method overriding”). This allows you to substantially alter the CodeIgniter core.
So in this case you can look at your system view class and just change it to return the output already compressed.
In your case You might even add an extra param so that the view function can return the output either compressed or not.
For more information about extending core classes in CodeIgniter 4 read this:
https://codeigniter.com/user_guide/extending/core_classes.html#extending-core-classes
In CodeIgniter 4, you can minify the HTML output of your views by using the built-in output compression library.
First, you need to enable output compression in your application's configuration file, which is located at app/Config/App.php.
Then, you need to set the compression level. You can set the compression level by changing the value of compress_output option. The possible values are:
0 : Off (Do not compress the output)
1 : On (Compress output, but do
not remove whitespace)
2 : On (Compress output, and remove
whitespace)
Finally, you need to load the Output Library in your controller, before the output is sent to the browser. You can load it using the following line of code:
$this->load->library('output');
I want to have a map of all bootstrap vars i'm using in sass.
$FULL_MAP = ("bootstrap": #include(bootstrap/_variables.scss)
To achieve this, do I have to manually rewrite the whole file?
I have ended up manually putting required vars into a map and then using themify mixing in order to apply vars from the map. The code is on github and this is the file that puts variables into the map
.custom-scope {
#import "~bootswatch/dist/cerulean/variables";
$cerulean: (
"primary":$primary,
"secondary":$secondary,
"success":$success,
"info":$info,
"warning":$warning,
"danger":$danger,
"light":$light,
"dark":$dark
);
$themes: map_merge($themes, ("cerulean": $cerulean)) !global;
}
I want to get data attr which is a number from HTML in my scss file and do a for loop on elements.
so here's what i did :
HTML :
<figure class="inner" data-attr="8"></figure>
SCSS
[data-attr] {
$no: attr('data-attr') !global;
}
and
#for $i from 0 through $no {
&:nth-of-type(#{$i}) {
left: $no;
}
}
but I got an error :
Error: attr("data-attr") is not an integer.$no: attr('data-attr') !global
You'll need to take a different approach.
SASS is a pre-processor that compiles into a CSS file. You can't use a SASS loop to generate CSS output based on a value that you don't have at the time of compilation.
Without knowing what you're actually attempting to do, it's not possible to suggest an alternative solution either.
I've written a Sass (SCSS) CSS3 #gradient mixin that also outputs a base64 encoded SVG string for IE9.
This mixin relies upon this custom ruby function be required in the user's Sass "watch" file:
require 'sass'
require 'base64'
module Sass::Script::Functions
def base64Encode(string)
assert_type string, :String
Sass::Script::String.new(Base64.encode64(string.value))
end
declare :base64Encode, :args => [:string]
end
which is called like so: base64Encode($svgStr).
However, I'd like to release my mixin library, and don't want to impose that this custom function be required.
For example, AFAIK Web Workbench for VS2012 has no way of including custom functions. If it isn't included, then I don't want to output the base64 rule.
So, is it possible to detect in the mixin whether base64Encode exists as a custom function? Otherwise, you end up with something like:
background-image: url("data:image/svg+xml;base64,base64Encode('<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 1 1\" preserveAspectRatio=\"none\"><linearGradient id=\"g522\" gradientUnits=\"userSpaceOnUse\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\"><stop stop-color=\"white\" offset=\"0\" /><stop stop-color=\"whitesmoke\" offset=\"1\" /></linearGradient><rect x=\"0\" y=\"0\" width=\"1\" height=\"1\" fill=\"url(#g522)\" /></svg>')");
instead of
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRo PSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNl cnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzUy MiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9 IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSJ3aGl0 ZSIgb2Zmc2V0PSIwIiAvPjxzdG9wIHN0b3AtY29sb3I9IndoaXRlc21va2Ui IG9mZnNldD0iMSIgLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9 IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzUyMikiIC8+ PC9zdmc+ ");
Or is possible to somehow search inside the returned string to check whether "base64Encode" is there and to ignore it?
This pull request (which has been merged) gives you a 'function-exists' function: https://github.com/nex3/sass/pull/821
AS the title says I am trying to check whether a variable is defined in SASS. (I am using compass if that makes any different difference)
I've found the Ruby equivalent which is:
defined? foo
Gave that a shot in the dark but it just gave me the error:
defined": expected "{", was "?
I've found a work around (which is obviously just to define the variable in all cases, which in this case it actually makes more sense) but I'd really like to know if this is possible for the future
For Sass 3.3 and later
As of Sass 3.3 there is a variable-exists() function. From the changelog:
It is now possible to determine the existence of different Sass constructs using these new functions:
variable-exists($name) checks if a variable resolves in the current scope.
global-variable-exists($name) checks if a global variable of the given name exists.
...
Example usage:
$some_variable: 5;
#if variable-exists(some_variable) {
/* I get output to the CSS file */
}
#if variable-exists(nonexistent_variable) {
/* But I don't */
}
For Sass 3.2.x and earlier (my original answer)
I ran into the same problem today: trying to check if a variable is set, and if so adding a style, using a mixin, etc.
After reading that an isset() function isn't going to be added to sass, I found a simple workaround using the !default keyword:
#mixin my_mixin() {
// Set the variable to false only if it's not already set.
$base-color: false !default;
// Check the guaranteed-existing variable. If it didn't exist
// before calling this mixin/function/whatever, this will
// return false.
#if $base-color {
color: $base-color;
}
}
If false is a valid value for your variable, you can use:
#mixin my_mixin() {
$base-color: null !default;
#if $base-color != null {
color: $base-color;
}
}
If you're looking for the inverse, it's
#if not variable-exists(varname)
To check if it is undefined or falsy:
#if not variable-exists(varname) or not $varname
And if you want to set it only if it's undefined or null
$varname: VALUE !default;
Just as a complementary answer - you should have a look on the default keyword for certain use cases. It gives you the possibility to assign a default value to variables in case they are not defined yet.
You can assign to variables if they aren’t already assigned by adding
the !default flag to the end of the value. This means that if the
variable has already been assigned to, it won’t be re-assigned, but if
it doesn’t have a value yet, it will be given one.
Example:
In specific-variables.scss you have:
$brand: "My Awesome Brand";
In default-variables.scss you have:
$brand: company-name !default;
$brand-color: #0074BE !default;
Your project is built like this:
#import "specific-variables.scss";
#import "default-variables.scss";
#import "style.scss";
The value of brand will be My Awesome Brand and the value of brand color will be #0074BE.