Skip to content

Instantly share code, notes, and snippets.

@pascalduez
Last active December 20, 2023 20:38
Show Gist options
  • Star 53 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save pascalduez/10011785 to your computer and use it in GitHub Desktop.
Save pascalduez/10011785 to your computer and use it in GitHub Desktop.
Some Sass string functions: capitalize, ucwords, camelize, ...
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
// Capitalize string
// --------------------------------------------------------------------------------
// @param [string] $string
// --------------------------------------------------------------------------------
// @return [string]
@function capitalize($string) {
@return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
}
// Alias
@function str-ucfirst($string) {
@return capitalize($string);
}
// Uncapitalize string
// --------------------------------------------------------------------------------
// @param [string] $string
// --------------------------------------------------------------------------------
// @return [string]
@function uncapitalize($string) {
@return to-lower-case(str-slice($string, 1, 1)) + str-slice($string, 2);
}
// Alias
@function str-lcfirst($string) {
@return uncapitalize($string);
}
// Capitalize each word in string
// --------------------------------------------------------------------------------
// @param [string] $string
// --------------------------------------------------------------------------------
// @return [string]
@function str-ucwords($string) {
$progress: $string;
$result: "";
$running: true;
@while $running {
$index: str-index($progress, " ");
@if $index {
$result: $result + capitalize(str-slice($progress, 1, $index));
$progress: str-slice($progress, ($index + 1));
}
@else {
$running: false;
}
}
@return capitalize($result) + capitalize($progress);
}
// Return whether `$value` is contained in `$list`
// --------------------------------------------------------------------------------
// @param [list] $list
// @param [$value] $value
// --------------------------------------------------------------------------------
// @return [boolean]
@function contain($list, $value) {
@return not not index($list, $value);
}
// Camelize string
// --------------------------------------------------------------------------------
// @param [string] $string
// --------------------------------------------------------------------------------
// @return [string]
@function camelize($string) {
$progress: $string;
$result: "";
$exclude: " ", "-", "", "", "_", ",", ";", ":", ".";
@while str-length($progress) > 0 {
$char: str-slice($progress, 1, 1);
@if contain($exclude, $char) {
$progress: capitalize(str-slice($progress, 2, 2)) + str-slice($progress, 3);
}
@else {
$result: $result + $char;
$progress: str-slice($progress, 2);
}
}
@return $result;
}
sass {
capitalize: capitalize("hello");
uncapitalize: uncapitalize("HELLO");
ucwords: str-ucwords("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");
camelize: camelize("my-function-name");
camelize: camelize("Another class constructor.");
}
sass {
capitalize: "Hello";
uncapitalize: "hELLO";
ucwords: "Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, Sed Do Eiusmod Tempor Incididunt Ut Labore Et Dolore Magna Aliqua.";
camelize: "myFunctionName";
camelize: "AnotherClassConstructor";
}
@samIntegrateur
Copy link

Just to say thanks, this is very useful !

@caiotriana
Copy link

Thanks friend, it helped me a lot, congratulations

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment