Sass is an extension of CSS3 that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. (With a little help from Ruby) This talk will cover an overview of what Sass is, how to get it, run it, and use it, and show some examples of its magic.
Code examples at: https://github.com/founddrama/vt-code-camp
I don't know about you, but vanilla CSS always leaves me wanting more. It's a fairly simple language, can do some pretty powerful things, but after a while.. well, it can become rather tedious to work with. Enter Sass: Syntactically Awesome Stylesheets. Sass is a CSS meta-language and precompiler that makes the prettification of your website a breeze by adding invaluable features of more traditional programming languages. In this session, we'll jump right in to the Sass workflow and cover all the key game changers - nesting, variables, mixins, inheritance, and directives. We'll also cover some of the gotchyas, tools and extensions, and tips for organization and coding standards.
Prepared for self.conference at COBO Hall in Detroit, Michigan on May 30, 2014.
Updated for CodeMash January 2015.
Updated for Detroit Craftsman Guild March 2016.
From this presentation, we will understand,
- Introduction to Sass
- Why adding Sass in our workflow
- Advantages of Sass
- How to convert our CSS into Sass
- Compass
- What is Compass
- How to use sass with compass
Sass is an extension of CSS3 that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. (With a little help from Ruby) This talk will cover an overview of what Sass is, how to get it, run it, and use it, and show some examples of its magic.
Code examples at: https://github.com/founddrama/vt-code-camp
I don't know about you, but vanilla CSS always leaves me wanting more. It's a fairly simple language, can do some pretty powerful things, but after a while.. well, it can become rather tedious to work with. Enter Sass: Syntactically Awesome Stylesheets. Sass is a CSS meta-language and precompiler that makes the prettification of your website a breeze by adding invaluable features of more traditional programming languages. In this session, we'll jump right in to the Sass workflow and cover all the key game changers - nesting, variables, mixins, inheritance, and directives. We'll also cover some of the gotchyas, tools and extensions, and tips for organization and coding standards.
Prepared for self.conference at COBO Hall in Detroit, Michigan on May 30, 2014.
Updated for CodeMash January 2015.
Updated for Detroit Craftsman Guild March 2016.
From this presentation, we will understand,
- Introduction to Sass
- Why adding Sass in our workflow
- Advantages of Sass
- How to convert our CSS into Sass
- Compass
- What is Compass
- How to use sass with compass
Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml.
Rob Walker from Papertrail takes us through his recent journey from regular CSS to SCSS. If you’re thinking of making the switch yourself and just need a little push, this is the talk for you.
HTML5, CSS, JavaScript Style guide and coding conventionsKnoldus Inc.
Coding conventions are style guidelines for any programming language. As, we are growing ourselves rapidly in learning new technology, the need for learning of the coding standards and conventions for the same language also arises.
So, here let us try to learn some coding guidelines for few frontend languages.
I'm excited to announce that I've just released the stable version of Sass 3.5. This release focuses on compatibility with new CSS syntax, and helps lay the groundwork for the upcoming module system and compatibility with Dart Sass.
This is a presentation I gave on Sept. 25, 2012 for the Winnipeg PHP Group on some of the features in LESS I have started using in my own development environment.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
CSS Sanity with Sass: The Inverted Triangle ApproachJulie Kuehl
You always start with the best of intentions. The parent/starter theme you begin your custom site with has a beautifully laid out style.css file. You do your best to keep everything organized and logical, but in the throes of deadlines and CSS frustrations things get ugly. Maybe you’ve heard of Sass and don’t know how to begin. Maybe you’ve used Sass and aren’t quite seeing the light yet. We’ll go over how to begin with Sass and how to use the Inverted Triangle way of organizing Sass to help you keep your sanity throughout the entire project.
Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml.
Rob Walker from Papertrail takes us through his recent journey from regular CSS to SCSS. If you’re thinking of making the switch yourself and just need a little push, this is the talk for you.
HTML5, CSS, JavaScript Style guide and coding conventionsKnoldus Inc.
Coding conventions are style guidelines for any programming language. As, we are growing ourselves rapidly in learning new technology, the need for learning of the coding standards and conventions for the same language also arises.
So, here let us try to learn some coding guidelines for few frontend languages.
I'm excited to announce that I've just released the stable version of Sass 3.5. This release focuses on compatibility with new CSS syntax, and helps lay the groundwork for the upcoming module system and compatibility with Dart Sass.
This is a presentation I gave on Sept. 25, 2012 for the Winnipeg PHP Group on some of the features in LESS I have started using in my own development environment.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
CSS Sanity with Sass: The Inverted Triangle ApproachJulie Kuehl
You always start with the best of intentions. The parent/starter theme you begin your custom site with has a beautifully laid out style.css file. You do your best to keep everything organized and logical, but in the throes of deadlines and CSS frustrations things get ugly. Maybe you’ve heard of Sass and don’t know how to begin. Maybe you’ve used Sass and aren’t quite seeing the light yet. We’ll go over how to begin with Sass and how to use the Inverted Triangle way of organizing Sass to help you keep your sanity throughout the entire project.
Best practices when starting with Sass. Debunked myth that Sass is a new syntax everyone should noe embrace and recode everything in it. Sass brings to CSS many super useful features but the benefits can only be reaped if you apply sensible approaches. Otherwise you risk making things worse than using plain old CSS.
Prototype-based Programming with JavaScriptlienhard
This are the slides from a 2 hour lecture introducing object-oriented prototype-based programming. It includes an introduction to JavaScript, delegation, constructors, and closures.
An introduction to the SASS language for styling your web projects. Its aim is to explain why you should make the jump from CSS to SASS, and to help you do so as easily as possible.
This presentation also focuses on getting you the highest impact from the simplest features of the SASS language.
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassClaudina Sarahe
Slide from a presentation given at 2011 Design for Drupal in Boston about two popular CSS extensions and Compass with a focus on how they integrate in Drupal environment. The goal is to present and overview of Sass and LESS in order to drive front-end developers to abandon plain old CSS. Compass is talked about as the reason to use Sass over LESS.
A talk on front-end developer tools including Yeoman, Grunt.js, Require.js, Bower, and SASS given at Drupal Camp LA 2013.
This talk doesn't address Drupal specifically, but it was aimed to give the audience of drupal developers a look into the state of the art.
Slides presented at DrupalCamp Montreal 2013. Walks through the features of the Zen theme, how to use Sass and Compass, and finally, how to use Zen Grids to change the layout. Conclusion: Zen Grids simplifies the process of changing the layout, so makes responsive design a lot easier to implement.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™UiPathCommunity
In questo evento online gratuito, organizzato dalla Community Italiana di UiPath, potrai esplorare le nuove funzionalità di Autopilot, il tool che integra l'Intelligenza Artificiale nei processi di sviluppo e utilizzo delle Automazioni.
📕 Vedremo insieme alcuni esempi dell'utilizzo di Autopilot in diversi tool della Suite UiPath:
Autopilot per Studio Web
Autopilot per Studio
Autopilot per Apps
Clipboard AI
GenAI applicata alla Document Understanding
👨🏫👨💻 Speakers:
Stefano Negro, UiPath MVPx3, RPA Tech Lead @ BSP Consultant
Flavio Martinelli, UiPath MVP 2023, Technical Account Manager @UiPath
Andrei Tasca, RPA Solutions Team Lead @NTT Data
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
Welocme to ViralQR, your best QR code generator.ViralQR
Welcome to ViralQR, your best QR code generator available on the market!
At ViralQR, we design static and dynamic QR codes. Our mission is to make business operations easier and customer engagement more powerful through the use of QR technology. Be it a small-scale business or a huge enterprise, our easy-to-use platform provides multiple choices that can be tailored according to your company's branding and marketing strategies.
Our Vision
We are here to make the process of creating QR codes easy and smooth, thus enhancing customer interaction and making business more fluid. We very strongly believe in the ability of QR codes to change the world for businesses in their interaction with customers and are set on making that technology accessible and usable far and wide.
Our Achievements
Ever since its inception, we have successfully served many clients by offering QR codes in their marketing, service delivery, and collection of feedback across various industries. Our platform has been recognized for its ease of use and amazing features, which helped a business to make QR codes.
Our Services
At ViralQR, here is a comprehensive suite of services that caters to your very needs:
Static QR Codes: Create free static QR codes. These QR codes are able to store significant information such as URLs, vCards, plain text, emails and SMS, Wi-Fi credentials, and Bitcoin addresses.
Dynamic QR codes: These also have all the advanced features but are subscription-based. They can directly link to PDF files, images, micro-landing pages, social accounts, review forms, business pages, and applications. In addition, they can be branded with CTAs, frames, patterns, colors, and logos to enhance your branding.
Pricing and Packages
Additionally, there is a 14-day free offer to ViralQR, which is an exceptional opportunity for new users to take a feel of this platform. One can easily subscribe from there and experience the full dynamic of using QR codes. The subscription plans are not only meant for business; they are priced very flexibly so that literally every business could afford to benefit from our service.
Why choose us?
ViralQR will provide services for marketing, advertising, catering, retail, and the like. The QR codes can be posted on fliers, packaging, merchandise, and banners, as well as to substitute for cash and cards in a restaurant or coffee shop. With QR codes integrated into your business, improve customer engagement and streamline operations.
Comprehensive Analytics
Subscribers of ViralQR receive detailed analytics and tracking tools in light of having a view of the core values of QR code performance. Our analytics dashboard shows aggregate views and unique views, as well as detailed information about each impression, including time, device, browser, and estimated location by city and country.
So, thank you for choosing ViralQR; we have an offer of nothing but the best in terms of QR code services to meet business diversity!
2. Who is this guy?
Nick Cooley
Principal Front-End Architect,
TandemSeven:
http://www.tandemseven.com
@nickcooley
http://www.github.com/nickcooley
3. Who is this guy?
Nick Cooley
Principal Front-End Architect,
TandemSeven:
http://www.tandemseven.com
@nickcooley
http://www.github.com/nickcooley
4. What we’ll talk about in this session...
• Recap of Sass/Compass
• Advanced Sass
• Control Structures
• Color Functions
• Advanced Compass
• Geometric functions and constants
• Application to Sencha Touch
• DEMOS!
5. What this Presentation ISN’T
• Sass vs LESS vs Stylus
• Why using a CSS Preprocessor is better than not using
one
• A conversation about how Preprocessors can bloat your
CSS
Many great articles arguing the merits/gotchas of using a
pre-processor. Here’s one I really agree with:
http://bit.ly/Sassisntbad
My personal opinion: “Like everything in technology,
preprocessors are a tool in your arsenal. You should
understand the fundamentals of CSS before relying on them.”
6. What this Presentation ISN’T
• Sass vs LESS vs Stylus
• Why using a CSS Preprocessor is better than not using
one
• A conversation about how Preprocessors can bloat your
CSS
Many great articles arguing the merits/gotchas of using a
pre-processor. Here’s one I really agree with:
http://bit.ly/Sassisntbad
My personal opinion: “Like everything in technology,
preprocessors are a tool in your arsenal. You should
understand the fundamentals of CSS before relying on them.”
7. What this Presentation ISN’T
• How to code/structure CSS
The hope is that you have *some* CSS
knowledge and are aware of best practices. If
not, here’s a great article for you: kiano.sh/
Inxxym
• How to build apps with Sencha Touch
While we will go over examples that include
demo Sencha Touch apps, the focus really is on
the Sass/Compass and resulting CSS
9. What is Sass?
• Stands for “Syntactically Awesome
StyleSheets”
• “Sass both provides a simpler, more elegant
syntax for CSS and implements various
features that are useful for creating
manageable stylesheets.”
• The foundation for style implementations in
ExtJS and Sencha Touch
10. What is Sass?
• Stands for “Syntactically Awesome
StyleSheets”
• “Sass both provides a simpler, more elegant
syntax for CSS and implements various
features that are useful for creating
manageable stylesheets.”
• The foundation for style implementations in
ExtJS and Sencha Touch
13. Sass: Nesting
•Sass: Allows you to nest selectors
within a parent selector.
•This provides an approach that’s
clean, concise, unique and DRY
14. Sass: Nesting
•Sass: Allows you to nest selectors
within a parent selector.
•This provides an approach that’s
clean, concise, unique and DRY
div {
&.content {
.element {
h1 {...}
}
}
}
//outputs
div.content .element h1 {...}
15. Sass: Variables
• Allow you to quickly parameterize
your CSS
• Create diverse variations in
seconds!
• Helps you create design standards
for your CSS.
• Using a main color in a number of
16. Sass: Variables
• Allow you to quickly parameterize
your CSS
• Create diverse variations in
seconds!
• Helps you create design standards
for your CSS.
• Using a main color in a number of
$color: #fff;
$pxHeight: 10px;
17. Sass: Mixins
• Mixins:Sass :: Functions:Javascript
• Allow you to define patterns for
reuse
• Mixins can be imported across
projects, helping you to create your
own framework
18. Sass: Mixins
• Mixins:Sass :: Functions:Javascript
• Allow you to define patterns for
reuse
• Mixins can be imported across
projects, helping you to create your
@mixin own framework
pictos-iconmask($name) {
.x-button .x-button-icon.x-icon-mask.#{$name} {
-webkit-mask-image: theme_image($theme-name, "pictos/" +
$name + ".png");
}
}
19. Compass
• Collection of Sass mixins and variables
• X-Browser CSS3 mixins
• Rounded Corners • Box Shadow
• Gradients • Text Shadow
• Common CSS development Patterns
• Reset.css • Sprites
• Clearfix • Web Fonts
• CSS3 Pie • More!
20. Let’s turn it up to 11
http://4.bp.blogspot.com/_8lK2el5pnbU/S-dDjMziqsI/AAAAAAAAGMc/YkZMHVA2-5k/s1600/SpinalTap_.jpg
21. Control Directives
in Sass
Very similar to a number of control
directives in languages like javascript,
ruby, PHP -- Sass provides some
rudimentary functionality:
• if/else if/else
• for
• while
22. @if
Works like every “if” directive you’ve
ever used (if, else if, else)
• create exceptional cases determined
by CSS controlled attribute
OR
• Sass also contains an “if” function
which works as: if($condition, $if-
23. @if examples
• Example of default @if method
implementation
• Example of if() function method
24. @if examples
• Example of default @if method
implementation
@if $type == bevel {...}
@else if $type == matte {...}
@else {...}
• Example of if() function method
25. @if examples
• Example of default @if method
implementation
@if $type == bevel {...}
@else if $type == matte {...}
@else {...}
• Example of if() function method
border: if($i%2==0, 1px solid #000, 4px solid #333);
26. @for
Is different from the “for” directive in
most programming languages
• two types: “to” and “through”
• cannot count down
• can only iterate by one
28. @for examples
• Example of “to”
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
//outputs
.item-1 {width: 2em; }
.item-2 {width: 4em; }
• Example of “through”
29. @for examples
• Example of “to”
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
//outputs
.item-1 {width: 2em; }
.item-2 {width: 4em; }
• Example of “through”
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//outputs
.item-1 {width: 2em; }
.item-2 {width: 4em; }
.item-3 {width: 6em; }
30. @while
Iterates across a range of values using
a statement evaluation until it results in
false
• can evaluate to < > ==
• WARNING: you must adjust the
evaluation variable manually
31. @while
Iterates across a range of values using
a statement evaluation until it results in
false
• can evaluate to < > ==
• WARNING: you must adjust the
$i: 8;
@while $i > 0 {
evaluation variable manually
.box#{$i} {
$factor: 100px - ($i * 10);
height:$factor !important;
width:$factor !important;
background: #333;
$i: $i - 1;
}
}
33. @each
Iterates through a list of items
individually
• Can include list as parameter or
variable
$list: (bob, steve, rob);
@each $person in $list {
.#{$person}{background-image: url($person);}
}
// CSS output
.bob {background-image:url(bob); }
.steve {background-image:url(steve); }
.rob {background-image:url(rob); }
34. Colors in Sass
One of the least discussed features in
Sass are color features
• Create themes/schemes/palettes
based on harmonious color
relationships
• Mix colors using color relationships
• Sass has operations for RGB and HSL
36. The Boxes
• A really basic demo which shows
various color functions/control
directives
37. Advance processing
in Compass
Compass may be a framework, but it
provides a number of helpful functions
which can make interesting results:
• Geometry functions:
• sin(), cos(), tan(), pi()
• Additional math functions:
• e(), log(), sqrt()
38. The benefits of
advanced functions
With these functions, you can:
• Offload some of the processing for things you
might do in javascript for faster performance
• Be able to calculate in one place and not worry
about it.
• Do things like:
• calculate coordinates on a circle
• plot points on a graph
• create some interesting designs using math!
40. HSL.clrpick.me
• Starting off with a base color,
generate related color-sets
based on hsl relationships.
• This can help you determine
what colors might go
with your initial color.
• Color relationships
are based on Sass
color functions
41. HSL.clrpick.me
• Starting off with a base color,
generate related color-sets
based on hsl relationships.
• This can help you determine
what colors might go
with your initial color.
• Color relationships
are based on Sass
color functions
42. So let’s put it all
together
HSL clrpick.me uses Sass/Compass for
• Iterators
• Positioning color swatches in 360
using Compass geometry
• Adjusts color using pre-defined
relationships
43. So let’s put it all
together
HSL clrpick.me uses Sass/Compass for
• Iterators
• Positioning color swatches in 360
using Compass geometry
• Adjusts color using pre-defined
relationships
53. The S and L bars
$light : lightness($colorwheel1);
@for $i from 0 through 10 {
&:nth-child(#{$i + 1}){
$startBackground: lighten($colorwheel1, 100);
$val: $i * 10;
background: darken($startBackground, $val );
span {margin-left:0; right:55px;}
span:after {content: "lightness: #{$val} color:
#{darken($startBackground, $val )}";}
}
}
54. But hey, you said
“Sencha Touch”
Sencha Touch is a javascript framework
which relies on Sass/Compass for its
look/feel.
• Sencha has put together a really solid
set of mixins: buttons, pictomasks,
toolbars
• There’s really no limit to what you
can add using Sass/Compass specific
55. But hey, you said
“Sencha Touch”
Sencha Touch is a javascript framework
which relies on Sass/Compass for its
look/feel.
• Sencha has put together a really solid
set of mixins: buttons, pictomasks,
toolbars
• There’s really no limit to what you
can add using Sass/Compass specific
56. Sencha Touch Docs
Throughout the Sencha Touch
documentation, you’ll find predefined
mixins which you can use out-of-the-
box
57. ST2 Demo
Just to show you that modifying Sass/
Compass for Sencha Touch is just as
easy as it is for anything else....
I&#x2019;ve been developing web solutions for over 12 years. I&#x2019;m a Principal Front-End Architect at TandemSeven where I build mobile and portal solutions for clients in the Financial Services, Health Care, Energy industries. \n
\n
1.) They're all generally great and do basically the same thing. There are some folks who are passionate about the issue, but we&#x2019;re here to talk about Sass/Compass\n2.) We're going to assume that you know the basics and buy into it. &#xA0;I'll point out basic benefits as they come up, but it's not a focus of this presentation\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
these features are unique to Sass vs LESS. Stylus has some similar features\n
2.) Called an &#x201C;instance method&#x201D; which evaluates a boolean condition. This is similiar to the javascript ternary operator for property values. Helpful for conditions you want to implement inline and can be useful in an iterator.\n
\n
\n
\n
\n
\n
\n
\n
\n
Well, fortunately Sass solves a lot of those problems out of the box. \n
\n
\n
\n
show page of color functions using the various functions above. color_demo.html\n
\n
\n
Should I take the time to show the examples first to illustrate where the talk is going and use the two examples to demonstrate each concept?\n